我以我的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="data: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="data: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="data: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="data: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="data:images/linktab_qr_appstore.png"  alt="iOS App Store"></a></li><li><a target="_blank"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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]拷贝忍者西西卡，上一秒你的网页很秀，这一秒就是我的网页了。

图示——李宇浩正在进行思维窃取

转载于:https://www.cnblogs.com/xiayezhige/p/10618372.html

软件工程第二次作业——模仿网站相关推荐

软件工程第二次作业——模仿主流网站：搜狗输入法
源码链接:https://gitee.com/tangjiahao/2017_software_engineering.git 原网页链接:https://pinyin.sogou.com/ 原网站: ...
软件工程第二周作业
##软件工程第二周作业提出问题 1. 一般来说,想要自己的程序跑得又快又好,就要减少函数的反复调用,但有所得则必有所失,效能提高就有可能伴随着程序的稳定性的降低,这两者应该如何权衡呢? 2. 关于5 ...
北航2022软件工程第二次作业——产品评测、分析与规划
软件工程第二次分析作业项目内容这个作业属于哪个课程北京航空航天大学2022春季软件工程(罗杰任健) 这个作业的要求在哪里个人阅读作业-软件案例分析我在这个课程的目标是学习软件工程的基础 ...
本周总结前端第二次作业模仿制作百度界面
前端第二次作业: 制作百度界面: https://www.baidu.com/ 要求: 模仿制作,相似度达99%. 仿照https://www.runoob.com/css/css-tutorial. ...
2022OUC软件工程第二次作业-08组
第二次作业:深度学习基础一.金知霖一.视频学习心得及问题总结人工智能:使一部机器像人一样进行感知.认知.决策.执行的人工程序或系统人工智能三个层面:计算智能.感知智能.认知智能机器学习的定义 ...
集大1513 1514班软件工程第二次作业评分与点评
谢谢按时完成作业的同学. 请大家在今后的作业中多思考,认真完成并注意作业的原创性. 学号作业标题作业地址提交日期分数 201521121087 微信APP简要分析 http://www.cnb ...
2016福州大学软件工程第二次作业成绩
第二次作业为结对项目之需求分析与原型设计以下为作业成绩: 学号姓名昵称评分 031402524 王智强 iphone2s 9 031402509 胡泽善 aiprogram 9 0314025 ...
现代软件工程第二次作业-github初使用及CanTool需求文档
作业要求: 完成下面的题目,并在小组博客中写出整个操作过程及学习心得(图文并茂):(每人都要在小组博客中写出来,并注明姓名) 1.参照 http://www.cnblogs.com/xinz/p/38 ...
软件工程第二次作业（原型设计）
课程名称:软件工程实践作业要求:结对第一次-原型设计(文献摘要热词统计) 结对学号:221600428 | 221600438 作业目标:了解NABCD模型,学习建立软件原型原型工具:墨刀 PDF ...

软件工程第二次作业——模仿网站

四、技术细节

软件工程第二次作业——模仿网站相关推荐

最新文章

热门文章