网页课程设计报告书 2

网页课程设计报告书

题目：《进击的巨人》动漫介绍

专业：软件工程    班级：软件二班

姓名：赵景涛  学号：20

指导教师：高岚 王锐

制作日期：20##-12-05

信息工程学院


目录

一 概要.......................................................................................................................... 2

一．网站开发背景与目的..................................................................................... 2

二．开发与运行环境............................................................................................. 2

二 需求分析.................................................................................................................. 3

三 总体设计.................................................................................................................. 3

四 详细设计.................................................................................................................. 4

一． 建立站点....................................................................................................... 4

五 结束语...................................................................................................................... 5

一． 不足............................................................................................................... 5

二．个人心得......................................................................................................... 5

附录................................................................................................................................ 1

一．源代码............................................................................................................. 1

二． 参考文献....................................................................................................... 5

 


一 概要

一．网站开发背景与目的

  网站开发背景与目的随着网络技术的发展与互联网的普及，网站建设与网页制越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传，通过网站的制作可以让老师、同学以及朋友更好的了解自己以及别人想要知道的事情。我现在做的是关于我的家乡，为别人提供了一个更深入了解自己和了解我们家乡（也是我们大学生活的地方）的一个平台，本网站主要功能是让更多的人去了解我和了解我的家乡，同时也让他们因大学在我们的家乡而自豪。

二．开发与运行环境

  《进击的巨人》网站是在Windwos7环境下用记事本、Dreamweave开发工具完成静态网站的开发，我们完全是运用了这一学期的网页制作教程所学习的知识和课外自学知识完成的。

 

二 需求分析

  用户对网站的要求是：风格统一和谐的网页，网页操作合理、方便、友好 需要实现的功能和性能是：适当运用HTML语言和CSS样式定义，并正确运用多媒体信息，设计出风格统一和谐的网页；网站正常运行，功能达到设计要求，风格和谐统一，操作合理、方便、友好，界面具有美感或创意，还要符合网站管理的原

三 总体设计

  网站的主题是介绍进击的巨人这部动漫中的男女主角，背景是动漫中的优美场景。

  网页的主页放置男女主角的经典形象图片，再配以主题曲。

  点击男女主角图片还可以连接到他们各自的简介。

 

 

四 详细设计

一．建立站点

  在制作网页中，必须先建立本地站点，这对于创建和维护网站是至关重要的。建立本地站点就是在自己电脑硬盘上建立一个目录，然后将所有与制作网页相关的文件都存放在这里面，也便进行网页的制作和维护。

  首先创建站点目录，如下。


然后在Dreamweaver中定义站点。

主页截图如下，


五 结束语

一．不足

  网站介绍的动漫不够充分，主角介绍的不太详细，例如男主角的经典的打斗场面，女主角温柔可爱的一面。

  网页的布局显得杂乱无章，色彩搭配也不是很理想。

二．个人心得

个人经过这次项目实训，我发现自己对网页方面的知识还有待进一 步提高，单是布局就有几种不同的方式，我现在学到的只是冰山一角。在做项目的过程中，我遇到了各种各样的问题，例如怎样定位，才能使做出来的网页不会在浏览器上散乱；怎样布局才好看等。有的可以通过自己的努力解决掉，有的则是通过大家的努力一起解决，可以说这也是一个学习的过程。还有，团队的合作是必不可少的，为了完成做这个项目，我们一起吃饭，一起睡觉，虽然有点苦，但是很开心！！！


附录

一．源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>进击的巨人</title>

<style type="text/css">

body,td,th {

       font-size: 10px;

}

body {

       background-image: url(images/jjdjr.jpg);

}

a:link {

       color: #003;

}

a:visited {

       color: #C03;

}

a:hover {

       color: #003;

}

</style>

</head>

<body>

<div align="right"><a href="Untitled-3.html"><img src="images/san li/sl03.jpg" width="250" height="250" border="10" align="left" /></a><a href="part2/三笠简介.txt" target="_blank">

  <embed src="images/Linked Horizon-紅蓮の弓矢(动漫《进击的巨人》主题曲).mp3" width="32" height="32" hidden="ture" loop="ture" align="left"></embed>

</a><a href="Untitled-2.html"><img src="images/ai lun/al02.jpg" width="250" height="250" border="10" align="right" /></a></div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>艾伦简介</title>

<style type="text/css">

body,td,th {

       font-size: 24px;

       color: #000;

}

body {

       background-color: #FFF;

       background-image: url(images/ai%20lun/al01.jpg);

}

</style>

</head>

<body>

<p>动漫作品《进击的巨人》的男主角。出身于&quot;玛利亚之墙&quot;（Wall．Maria）南端的希干希纳区。拥有强韧的精神力与非凡的行动力，对墙壁外的世界拥有比任何人都要高的憧憬，从小便立志要加入调查军团。故事之初（845年），希干希纳区被未知的&quot;超大型巨人&quot;袭击，&quot;玛利亚之墙&quot;（Wall．Maria）城门又遭&quot;铠之巨人&quot;冲撞破坏，巨人因而进入第一道城墙区猎食人类。目睹母亲遭巨人吞食后，立誓要消灭所有的巨人。<br />

  经典语录<br />

  我要把它们（巨人）,全都驱逐出去，一个不留地驱逐出这个世界！</p>

<p>　　那种事…还用得着问吗？因为我，诞生在这个世界上了啊！（被问到为什么会想要到外面的世界去）</p>

<p>　　战…战斗啊，快点战斗啊！赢不了的话…就会死；赢了…就能活下去！要是不战斗…就赢不了！</p>

<p>　我们每个人...打从出生开始...就是自由的。</p>

<p>　　适可而止吧，三笠！怎么连你也变得这么惊慌失措了，这可是人类灭亡的危机啊，你还在想着你的那点事吗？！</p>

<p>　　请等一下！我的确有可能是怪物没错，但这件事和她毫无关系啊！没有任何关系！</p>

<p>　　我不会死的，我是不会在这种地方轻易死去的！</p>

<p>　　怎么样，三笠，我能行！有和巨人一战的能力了，我以后再也不用受你的照顾了！</p>

　　

别太过分了，三笠！我既不是你的弟弟也不是你的孩子啊，我应该已经说过了吧？

<p>　  怎么了，快点回去吧，回我们的家。</p>

<p>　　我或许没有天赋但论毅力我不会输给任何人。</p>

<p>　　不过是一条围巾，你想要多少次我就给你围多少次。往后的岁月里我也会一直帮你围好（对三笠）<br />

</p>

<p></p>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

body,td,th {

       font-size: 24px;

       color: #FF0;

}

body {

       background-color: #FFF;

       background-image: url(images/san%20li/sl02.jpg);

}

</style>

</head>

<body>

<p>三笠·阿克曼是日本动漫《进击的巨人》中的女主角。艾伦·耶格尔的青梅竹马，被艾伦救过一条命，二人经常一起活动，互相视对方为最重要的人。是流着东洋人血统的黑发美少女。以第104期训练兵团首席的身份毕业，性格沉稳冷静，有以一敌百的战斗力。后来与艾伦一起加入调查兵团。<br />

  经典话语：</p>

<p>　　不是恋人，是家人！</p>

<p>　　我不想再失去家人了！</p>

<p>　　艾伦，只要有你在，我就无所不能。</p>

<p>　　没错，这个世界...原本就是残酷的。</p>

<p>　　艾伦，你不记得我了吗？！我是三笠，是你.....的家人！</p>

<p>　　对不起，艾伦，我已经不会放弃了，再也不会放弃了；要是就这么死了的话，就连你的事都没法再回忆起来了；所以，无论怎样我都要赢，无论怎样我都要活下去！</p>

</body>

</html>

二．参考文献

[1]赵丰年，网页制作教程(第3版) [M]人民邮电出版社，2006.

[2]易枚根，Dreamweaver 8 网页设计与网站建设[M]机械工业出版社，2007.

[3]张强，高建华，温谦 网页制作与开发教程[M]人民邮电出版社，2008 .

[4]张培 Dreamweaver 8入门与提高实例教程[M]机械工业出版社，2007.

[5]耿跃鹰，网页制作与网站开发：从入门到精通[M]清华大学出版社，2008.

相关推荐

专栏推荐