我以我的JS发誓
我以我的解释器宣告
将世界上所有的HTML汇聚
将世界上应有之css样式改变
集中所有的解释器和JS
将这网页为我所用
the Teleport Ultra
倾听我内心的愿望
让它实现吧！
原网页网址：https://granbluefantasy.jp/
模仿网页网址：http://yh.yxdesu.xyz/（再次感谢我的朋友YXDS帮助，网页挂靠在他的服务器上）
由于码云限制了我上传文件的速率
，所以文件还没有上传完。
现在的rar压缩文件为https://gitee.com/stonetuskboar/zabivaka/attach_files
本次作业我向王涵[1]进行了请教，向凌龙[2]进行了学习，使用了The Teleport Ultra软件对GranBlueFantasy网站进行了拷贝，相关技术与拷贝忍者李宇浩相似[3]。
1，原网页截图
这是原官网的首页
这是我做的，改了几个图，减少了几个元素，修改了图片指向的链接。
这是原官网页的世界背景介绍
这是我改的（有彩蛋）
这是网页相关
这是我自己写的
这是官网的battle界面
这是莎士比亚名著！
这是官网的theatre界面
这是我自己改的（图片可以点击？）
以上就是作业的全部内容了，做这个网页花了我两天的时间，从五点半下课后就在宿舍枯坐，对着Visual Code面壁思过。让我下课后不能撩妹，不能打游戏，不能看剧，让我凭空生了许多惆怅。
2，源文件源代码介绍
common存放了网页的css样式，一些通用的图片文件，js代码。
font是字体，data是一些没用的旧文件。images存放了首页的图片文件、
system,theatre，world是几个子页面的相关html和图片。
index是首页的html，about this site是网页相关。
总代码量过长，因此只放上index文件。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8"UTF-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" >
<title>第二次软件工程作业</title>
<meta name="description" content="第二次作业的网站，拷贝至granblue fantasy官网，拷贝忍者zabivaka在此。" />
<meta name="keywords" content="第二次软件工程作业又到了提交的时间，余昊能否赶在交稿时间之前做完作业？" />
<meta property="og:title" content="ZABIVAKA FANTASY｜Zabivaka" />
<meta property="og:description" content="原网站为granblue fantasy官网。" />
<meta property="og:type" content="game" />
<meta property="og:image" content="http://granbluefantasy.jp/common/images/ogimage.jpg" />
<meta property="og:url" content="http://granbluefantasy.jp/" />
<link rel="icon" type="image/gif" href="/common/images/favicon.png">
<link href="common/css/common.css-20181019.css" tppabs="https://granbluefantasy.jp/common/css/common.css?20181019" rel="stylesheet" type="text/css">
<link href="common/css/jquery.mCustomScrollbar.css" tppabs="https://granbluefantasy.jp/common/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
<link href="common/js/vendor/fancybox/jquery.fancybox.css" tppabs="https://granbluefantasy.jp/common/js/vendor/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css">
<!--[if lte IE 9]>
<link href="common/css/ie.css" tppabs="https://granbluefantasy.jp/common/css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<script type="text/javascript" src="../ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" tppabs="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="common/js/vendor/jquery.easing-1.3.pack.js" tppabs="https://granbluefantasy.jp/common/js/vendor/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="common/js/vendor/jquery.mousewheel-3.0.4.pack.js" tppabs="https://granbluefantasy.jp/common/js/vendor/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="common/js/vendor/jquery.mCustomScrollbar.concat.min.js" tppabs="https://granbluefantasy.jp/common/js/vendor/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="common/js/vendor/fancybox/jquery.fancybox.pack.js" tppabs="https://granbluefantasy.jp/common/js/vendor/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="common/js/vendor/jquery.cookie.js" tppabs="https://granbluefantasy.jp/common/js/vendor/jquery.cookie.js"></script>
<script type="text/javascript" src="common/js/app.js" tppabs="https://granbluefantasy.jp/common/js/app.js"></script>
<script type="text/javascript" src="common/js/app.view-top.js-20170115" tppabs="https://granbluefantasy.jp/common/js/app.view-top.js?20170115"></script>
<!--[if lt IE 9]>
<script src="../html5shiv.googlecode.com/svn/trunk/html5.js" tppabs="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="../ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" tppabs="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript" src="common/js/ie9-textshadow.js" tppabs="https://granbluefantasy.jp/common/js/ie9-textshadow.js"></script>
<![endif]-->
<script>
function googleplus_win(){
var htmlscope = window.open(
'https://plusone.google.com/_/+1/confirm?url='+encodeURIComponent('index.htm'/*tpa=http://granbluefantasy.jp/*/),
'',
'toolbar=0, status=0, width=500, height=600'
);
}
</script>
<script src="../apis.google.com/js/plusone.js" tppabs="https://apis.google.com/js/plusone.js">
{lang:'ja',parsetags:'explicit'}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','../www.google-analytics.com/analytics.js'/*tpa=https://www.google-analytics.com/analytics.js*/,'ga');
ga('create', 'UA-46301458-1', '404.php'/*tpa=https://granbluefantasy.jp/granbluefantasy.jp*/);
ga('send', 'pageview');
ga('create', 'UA-97198934-6', 'auto', {'name': 'llTracker'});
ga('404.php'/*tpa=https://granbluefantasy.jp/llTracker.send*/, 'pageview');
</script>
</head>
<body id="page-top" class="cat-top">
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "../connect.facebook.net/ja_JP/all.js#xfbml=1"/*tpa=https://connect.facebook.net/ja_JP/all.js#xfbml=1*/;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="animation_bg"></div>
<header id="site_header">
<div id="cygames_logo"><a href="http://yh.yxdesu.xyz/" target="_blank"><img src="common/images/cygames_logo.png" alt="Zabivaka" width="60" height="18"></a></div>
<nav id="global_nav">
<ul class="clearfix">
<li id="gnav_01" class="active">
<a href="index.php.htm" tppabs="https://granbluefantasy.jp/index.php">
<img src="common/images/gnav_01.png" tppabs="https://granbluefantasy.jp/common/images/gnav_01.png" alt="TOP" width="70" height="50">
<img src="common/images/gnav_01_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_01_ov.png" alt="TOP" width="70" height="50" class="over">
</a>
</li><!--
--><li id="gnav_03">
<a href="world/index.php.htm" tppabs="https://granbluefantasy.jp/world/index.php">
<img src="common/images/gnav_03.png" tppabs="https://granbluefantasy.jp/common/images/gnav_03.png" alt="WORLD" width="98" height="50">
<img src="common/images/gnav_03_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_03_ov.png" alt="WORLD" width="98" height="50" class="over">
</a>
</li><!--
--><li id="gnav_04">
<a href="system/index.php.htm" tppabs="https://granbluefantasy.jp/system/index.php">
<img src="common/images/gnav_04.png" tppabs="https://granbluefantasy.jp/common/images/gnav_04.png" alt="SYSTEM" width="105" height="50">
<img src="common/images/gnav_04_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_04_ov.png" alt="SYSTEM" width="105" height="50" class="over">
</a>
</li><!--
--><li id="gnav_05">
<a href="theatre/index.php.htm" tppabs="https://granbluefantasy.jp/theatre/index.php">
<img src="common/images/gnav_05.png" tppabs="https://granbluefantasy.jp/common/images/gnav_05.png" alt="THEATRE" width="120" height="50">
<img src="common/images/gnav_05_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_05_ov.png" alt="THEATRE" width="120" height="50" class="over">
</a>
</li><!--
--><li id="gnav_06">
<a >
<img src="common/images/gnav_06.png" tppabs="https://granbluefantasy.jp/common/images/gnav_06.png" alt="INTERVIEW" width="134" height="50">
<img src="common/images/gnav_06_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_06_ov.png" alt="INTERVIEW" width="134" height="50" class="over">
</a>
</li><!--
--><li id="gnav_07">
<a >
<img src="common/images/gnav_07.png" tppabs="https://granbluefantasy.jp/common/images/gnav_07.png" alt="MEDIA" width="90" height="50">
<img src="common/images/gnav_07_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_07_ov.png" alt="MEDIA" width="90" height="50" class="over">
</a>
</li>
</li><!--
--><li id="gnav_09">
<a target="_blank">
<img src="common/images/gnav_09.png" tppabs="https://granbluefantasy.jp/common/images/gnav_09.png" alt="CHANNEL" width="120" height="50">
<img src="common/images/gnav_09_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_09_ov.png" alt="CHANNEL" width="120" height="50" class="over">
</a>
</li>
</ul>
</nav>
</header>
<div id="change_contents">
<article id="top">
<h1><img src="images/logo.png" alt="GRANBLUE FANTASY グランブルーファンタジー" width="273" height="187"></h1>
<section id="links_content" class="box_style_01 clearfix">
<div class="tab" style="position:relative; top: 115px;"><a href="javascript:void(0);"><span class="hide">LINKS</span></a></div>
<div class="content">
<a target="_blank" style="display: inline-block; -moz-box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);-webkit-box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);">
<img src="images/linktab_playnow.png" alt="今すぐゲームをプレイ！">
</a>
<span style="font-size: 12px; margin-bottom: 7px; display: block;">※在虚构的网页里到处乱点的人脑袋一定有问题。</span>
<a target="_blank" style="display: inline-block; -moz-box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);-webkit-box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);box-shadow: 0 0 8px rgba(32, 59, 89, 0.5); margin-bottom: 15px;">
<img src="images/linktab_playdmm.png" alt="DMM版ををプレイ！">
</a>
<hr>
<div>
<div style="display: inline-block; width: 155px; position: relative; top: 13px; ">
<a target="_blank">
<img src="images/linktab_qr_smartphone.png" alt="スマホからプレイ！" style="vertical-align: inherit;">
</a>
</div>
<ul style="display: inline-block; margin-top: 10px; margin-bottom: 5px; border-left: 1px solid #ddd; padding-left: 35px;">
<li style="margin-bottom: 10px;"><a target="_blank"><img src="images/linktab_qr_appstore.png" alt="iOS App Store"></a></li>
<li><a target="_blank"><img src="images/linktab_qr_googleplay.png" alt="Android Google Play"></a></li>
</ul>
</div>
<hr>
<ul class="linktab_qrlist clearfix">
<li><a target="_blank" href="https://space.bilibili.com/866742" class="change_contents_trigger"><img src="images/to_andapp_logo.png" alt="AndApp"></a></li>
<li><a target="_blank" href="https://space.bilibili.com/866742" class="change_contents_trigger" style="position: relative; left: -25px;"><img src="images/to_andapp.png" alt="iOS App Store"></a></li>
</ul>
</div>
</section>
<div id="news_content" class="clearfix">
<div class="banner popup-banner">
<a href="https://www.fromsoftware.jp/jp/" target="_blank">
<img src="images/kyogra_banner_off.jpg" alt="今日からはじめるグラブル" width="253" height="80" rollover class="box_style_02">
</a>
</div>
<div class="banner">
<a href="https://www.naughtydog.com/" target="_blank">
<img src="images/banner_relink_off.jpg" width="253" height="80" rollover class="box_style_02">
</a>
</div>
<div class="banner">
<a href="https://www.gcores.com/" " target="_blank">
<img src="images/banner_fes2018_off.png" " alt="" width="253" height="80" rollover class="box_style_02">
</a>
</div>
<div class="banner">
<a href="https://www.taleworlds.com/" target="_blank">
<img src="images/banner_links_off.png" alt="永远不可能完成的游戏" width="253" height="80" rollover class="box_style_02">
</a>
</div>
<section class="clearfix">
<div class="tab"><a href="javascript:void(0);"><span class="hide">NEWS</span></a></div>
<div class="content" id="top_news_list">
<dl>
<dt>2019.03.28</dt><dd><div class="inner new"><a " class="change_contents_trigger">zabivaka出生19周年特别号</a></div></dd>
<dt>2019.03.25</dt><dd><div class="inner no_new"><a class="change_contents_trigger">「アキラ」4巻発売のお知らせ</a></div></dd>
<dt>2019.03.22</dt><dd><div class="inner no_new"><a class="change_contents_trigger">只狼全球发售！</a></div></dd>
<dt>2019.03.15</dt><dd><div class="inner no_new"><a class="change_contents_trigger">我选到软件工程课了！</a></div></dd>
<dt>2019.03.8</dt><dd><div class="inner no_new"><a class="change_contents_trigger">鬼泣5全球发售！</a></div></dd>
</dl>
</div>
</section>
</div>
</article>
</div>
<footer id="site_footer" class="clearfix">
<div id="copyright" class="text_style_03">© Zabivaka, Inc.</div>
<div id="site_footer_r">
<div id="site_footer_r_inner">
<nav id="site_footer_nav">
<a href="about_this_site.php.htm" class="text_style_03 change_contents_trigger">网页相关</a>
</nav>
</div><!-- //#site_footer_r_inner -->
</div><!-- //#site_footer_r -->
</footer><!-- //#site_footer -->
<script type="text/javascript">
(function () {
var tagjs = document.createElement("script");
var s = document.getElementsByTagName("script")[0];
tagjs.async = true;
tagjs.src = "../s.yjtag.jp/tag.js#site=BN9XBzy,jdvwBAD"/*tpa=https://s.yjtag.jp/tag.js#site=BN9XBzy,jdvwBAD*/;
s.parentNode.insertBefore(tagjs, s);
}());
</script>
<noscript>
<iframe src="../b.yjtag.jp/iframe-c=BN9XBzy,jdvwBAD" tppabs="https://b.yjtag.jp/iframe?c=BN9XBzy,jdvwBAD" width="1" height="1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>
<!-- Logicad Code -->
<script type="text/javascript">var smnAdvertiserId = '00005631';</script>
<script type="text/javascript" src="../cd.ladsp.com/script/pixel.js" tppabs="https://cd.ladsp.com/script/pixel.js"></script>
<!-- End Logicad Code -->
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '393546927697506');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="../www.facebook.com/tr-id=393546927697506&ev=PageView&noscript=1" tppabs="https://www.facebook.com/tr?id=393546927697506&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<!-- Twitter universal website tag code -->
<script>
!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='../static.ads-twitter.com/uwt.js'/*tpa=https://static.ads-twitter.com/uwt.js*/,
a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
// Insert Twitter Pixel ID and Standard Event data below
twq('init','nx82h');
twq('track','PageView');
</script>
<!-- End Twitter universal website tag code -->
<!-- GDN Code -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 855467393;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="../www.googleadservices.com/pagead/conversion.js" tppabs="https://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="../googleads.g.doubleclick.net/pagead/viewthroughconversion/855467393/-guid=ON&script=0.gif" tppabs="https://googleads.g.doubleclick.net/pagead/viewthroughconversion/855467393/?guid=ON&script=0"/>
</div>
</noscript>
<!-- End GDN Code -->
<!-- Yahoo Code for your Target List -->
<script type="text/javascript" language="javascript">
/* <![CDATA[ */
var yahoo_retargeting_id = 'E0PU4KJGBP';
var yahoo_retargeting_label = '';
var yahoo_retargeting_page_type = '';
var yahoo_retargeting_items = [{item_id: '', category_id: '', price: '', quantity: ''}];
/* ]]> */
</script>
<script type="text/javascript" language="javascript" src="../b92.yahoo.co.jp/js/s_retargeting.js" tppabs="https://b92.yahoo.co.jp/js/s_retargeting.js"></script>
<!-- End Yahoo Code for your Target List -->
<!-- i-Mobile code -->
<script type="text/javascript">
imobile_adv_sid = "20135";
imobile_adv_cq = "entry=2";
</script>
<script type="text/javascript" src="../spcnv.i-mobile.co.jp/script/adv.js" tppabs="https://spcnv.i-mobile.co.jp/script/adv.js"></script>
<!-- End i-Mobile code -->
</body>
</html>
其他html文件和index较为类似，不多赘述。
四、技术细节
下面将要着重讲一下这个作业的实现过程，啪啪啪啪啪啪！
使用Teleport Ulitra这个软件可以爬到目标网站的所有源文件，包括但不限于html，css，js，图片，视频等。
如下图所示
当然了，这个软件只能爬到你自己实际上可以访问到的网址，你不能爬霍格沃兹官方网站，不能爬内网，不能爬PornHub。（如果借助一些科学工具，其实也是可以爬到的。）
拿到源文件之后就可以为所欲为了。
省略200个字。
[1]王涵，2019年3月26日，23:17：44
[2]软件工程第二次作业——模仿实现主流网页，凌龙，https://www.cnblogs.com/linglong9068/p/10575529.html
[3]拷贝忍者西西卡，上一秒你的网页很秀，这一秒就是我的网页了。