1、个人主页 课程设计报告课 题: 火影之家 姓 名： 学 号： 同组姓名： 专业班级： 指导教师： 设计时间： 评阅意见：评定成绩：指导老师签名：年 月 日湖南文理芙蓉学院个人主页课程报告目 录一、运行坏境 3二、设计的目的和意义 32.1 课题的目的： 32.2 课题的意义： 3三、设计步骤： 43.1 准备工作： 43.2 Flash 设计步骤： 43.3 HTML 的编写步骤： .63.4 Dreamweaver 的设计步骤： 6四、程序源代码 10五、调试过程分析 18六、网页的测试与发布 18七、小结 19参考文献 20个人主页课程设计报告第 3 页一、运行坏境本网页主要基于 wind
2、ows XP /2000 或其他系列操作系统，安装有Flash 播放器、网页三剑客：Macromedia Dreamweaver 、Macromedia Fireworks 、Macromedia Flash 的运行坏境。二、设计的目的和意义2.1 课题的目的由于本人比较喜欢火影，所以本次课程设计中主要是以火影为主要的素材。本次课程设计的主题是个人网页制作，我主要做了 7 个网页。网页主要是以flash 为主，子网页主要是以介绍为主，其中包含了人物的特点、擅长的技能、图片，能够帮助火影爱好者更清晰的了解剧情里面的人物关系和自身的特点！还有各种关于火影相关的连接，能够比较系统的找到火影的相关信息
3、，希望对广大感兴趣的人爱好者会有所帮助！ 个人网页设计是采用 HTML、Dreamweaver、Photoshop 等结合开发的，要进行网页的开发，必须对要 Dreamweaver、flash、Photoshop 等设计软件有所了解。而且还要熟悉利用 HTML 语法来编写网页代码。当然，还要有一定美术功底。2.2 课题的意义：理论意义随着 Internet 在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务.由于 WEB 页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时 WEB 页能实现网上交易
4、平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企个人主页课程设计报告第 4 页业知名度.现实意义我们本次通过设计个人网页主要是学习掌握 HTML 语言的用法，以及Dreamweaver 的一些具体操作，还有学会运用一些 Photoshop 的知识。希望通过本次设计能够熟悉以上知识，并能够设计出好的网页。三、设计步骤：3.1 准备工作：本站素材来源：火影中文网、百度、Google 等，并结合Photoshop、123Flash 等辅助软件制作网页背景、图标等素材。素材主要包括网站所需要的图片、火影忍者相关的文字说明如作者岸本齐史简介、火影忍者人物
5、性格分析火影人忍者简介及剧情介绍等。前期构思，主要完成网站主题框架设计如首页与分页面的逻辑结构、各分页面框架布局、首页框架布局、导航栏链接、完成基本的图像文字排版及部分较为简单的页面构思。在头脑里完成网站“火影之家”规划报告 （草案） 。3.2 Flash 设计步骤：. 进入 Flash 软件的运行环境设置背景颜色为黑色。如图 3-1 所示：图 3-1将下面的线条重复的放在黑色的背景上面，会出现有种渐变色的感觉。如下图 3-2 所示：个人主页课程设计报告第 5 页图 3-2还有图片的相应的切换，每张图片都是由模糊到清楚慢慢的变化。 （需要编写程序实现这些功能）.在编程区域编写程序，源代码见程序
6、源代码中（style.css）：.效果图如下：图 3-1 图 3-2图 3-3 图 3-4图 3-5 图 3-6个人主页课程设计报告第 6 页3.3 HTML 的编写步骤：.新建一个记事本文件。.在文本文档中编辑自己的 HTML 代码。.将文本文档的后缀名.txt 改成.htm(或者 .html)。.如果完成后的.htm 文档需要修改可以：1.用文本文档的方式打开修改 2.选择 IE 浏览器查看-源文件修改网页中设计到的主要代码：获取图片代码:背景颜色设置： 文字链接设置：This text图片链接设置：3.4 Dreamweaver 的设计步骤：.打开 Dreamweaver 主界面，单击菜
7、单栏文件打开已经编写好index.Html 等网页文件。.然后对 index.Html 文件的排版进行设置，经过一段时间的调整，主界面基本形成。效果图如下所示：图 3-7 欢迎页面（1）个人主页课程设计报告第 7 页图 3-7 欢迎页面（2）图 3-7 欢迎页面（3）个人主页课程设计报告第 8 页.子界面设置效果如下图所示：图 3-8 火影简介截图（1）图 3-8 火影简介截图（2）图 3-8 火影简介截图（3）个人主页课程设计报告第 9 页图 3-9人物简介页面截图（1）图 3-9人物简介页面截图（3）单击 logo 链接到海贼网的官方网界面，界面截图下：图 3-10 链接界面截图个人主页课
8、程设计报告第 10 页四、程序源代码. style.css 中的源代码如下：charset “utf-8“;/* CSS Document */body font-size: 12px;margin: 0px;padding: 0px;background-color: #000;background-image: url(/images/bg.jpg);background-repeat: repeat-x;a color: #362a00;text-decoration: none;a:hover color: #ea0000;text-decoration: underline;#ind
9、exmargin:0 auto;text-align:center;color:#ccff66;#index embedwidth:800px;height:600px;#index h1font-size:36px;#index h2 acolor:#02e3e3;font-size:24px;text-decoration:none;#index h2 a:hovercolor:#ccff66;#header 个人主页课程设计报告第 11 页height: 223px;width: auto;background-image: url(/images/header_bg.jpg);back
10、ground-repeat: no-repeat;background-position: center;#nav height: 107px;background-image: url(/images/nav_bg.jpg);background-repeat: no-repeat;background-position: center;#nav .nav_main height: 107px;width: 931px;margin: auto;color: #FFC;#nav .nav_main ul margin: 0px;padding: 0px;#nav .nav_main ul l
11、i margin-left:45px;line-height:80px;display: inline;#nav .nav_main ul.u1 width: auto;font-size: 20px;font-weight: bold;text-align: center;padding-top: 25px;padding-bottom: 5px;color: #FC0;#nav .nav_main .u1 li a color: #FC0;text-decoration: none;padding-right: 5px;padding-left: 5px;#nav .nav_main .u
12、1 li a:hover text-decoration: underline;个人主页课程设计报告第 12 页color: #FC0;#nav .nav_main .u1 li .red color: #F00;#nav .nav_main .u1 li .red:hover color: #F00;#nav .nav_main ul.u2 text-indent: 25px;padding-top: 2px;padding-bottom: 2px;#nav .nav_main .u2 li a color: #FFC;text-decoration: none;padding-right:
13、 5px;padding-left: 5px;#nav .nav_main .u2 li a:hover color: #FFC;text-decoration: underline;#main height:1200px;width: auto;background-image: url(/images/main_bg.jpg);background-position: center;background-repeat: repeat-y;#main_up background-image: url(/images/up_bg.jpg);background-repeat: no-repea
14、t;background-position: center top;width: auto;#main_up_body width: 931px;margin: auto;height: 1200px;#news height: 1200px;width: 930px;个人主页课程设计报告第 13 页#news .news_main background:#d5ad4b;height: 1200px;text-align:center;overflow:auto;#news .news_main ptext-align:left;font-size:16px;line-height:180%;
15、margin:10px;text-indent:32px;#flink background-image: url(/images/flinkbg.jpg);background-repeat: no-repeat;background-position: center center;padding-top: 16px;padding-bottom: 16px;text-align: center;padding-left: 70px;#flink img padding-right: 3px;padding-left: 3px;border-top-width: 0px;border-rig
16、ht-width: 0px;border-bottom-width: 0px;border-left-width: 0px;.index.Html 中的源代码如下：火影忍者个人主页课程设计报告第 14 页欢迎来到火影之家 ENTER.home.Html 中的源代码如下：火影忍者火影简介三代班卡卡西班阿斯玛班凯班红班火影忍者是日本漫画家岸本齐史的代表作，作品自1999年开始在周刊少年JUMP上连载后，读者反应非常热烈。随后，火影忍者的TV动画在日本东京电视台播放，成为最受欢迎的动漫作品之一。故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘
17、成了太阳下最值得骄傲最光明无限的的职业。在这个忍者的世界中，每一位年轻的主人翁都在开拓着属于自己的忍道。这是一个忍者的世界。从小身上封印着邪恶的九尾妖狐，第一期鸣人个人主页课程设计报告第 15 页受尽了村人的冷落，只是拼命用各种恶作剧试图吸引大家的注意力。好在还是有依鲁卡老师关心他，鸣人的性格才没有变得扭曲，他总是干劲十足，超级乐观。为了让更多的人认可自己，鸣人的目标是成为第六代火影！鸣人的同伴，是由老师确定的同班同学，随着共同的战斗，终于成了互相认可、信赖的好伙伴。 这是一个忍者的世界。在Naruto的世界中，忍者这个职业，就像HunterXHunter里的猎人、One Piece里的海盗一
18、样，是少年们的梦想！不过这回的主人公鸣人和自学成才的小冈、路飞不一样，他是木叶忍者村的忍者学校中科班毕业的哦（虽然毕业得很有些勉强，是被称为万年吊车尾的“差生”，汗）。 从小身上封印着邪恶的九尾妖狐，无父无母的鸣人受尽了村人的冷落，但是他却不知道原因，只是拼命用各种恶作剧试图吸引大家的注意力，人们却反而更远离他。好在还是有依卡鲁老师关心他，鸣人的性格才没有变得扭曲，他总是干劲十足，嘻嘻哈哈，超级乐观。为了让更多的人认可自己，鸣人的目标是成为第五代火影！这可是很高的目标哦，火影是世上最强的五位忍者之一的封号，也是木叶忍者村的首领。鸣人可不管，对于自己终有一天能成为火影，他可是超级自信的哦。努力吧
19、，鸣人！ 鸣人的同伴，是由老师确定的同班同学，一开始大家互相看不顺眼，不过随着共同的战斗，虽然面子上还是要斗一斗，但终于成了互相认可、互相信赖的好伙伴。同伴中照例有酷酷的帅哥佐助（还背负着复仇者的使命）和聪明可爱的女孩小樱，对手中有狡诈的超强Boss大蛇丸，孤独的杀手再不斩、冷酷嗜血、没人要的小孩我爱罗还有既有竞争又有互助的其他组的木叶同学们，虽然是少年漫画的传统设定，但是人物和故事都很精彩哦！.one.Html 中的源代码如下：火影忍者火影简介三代班卡卡西班阿斯玛班凯班红班纲手 基本资料 姓名：千手纲手 日文平假名： 日文片假名： 罗马拼音：tsu na te 忍者登记号码：002302 级
20、别：影级 现任：木叶村第五代火影 出生日期：8月2日 星座：狮子座 身高：163.1cm 体重：48.9kg 血型：B型 年龄：54岁 发型：黄色双马尾 擅长：医疗忍术、体术 派别：木叶忍者村医疗忍者 性格：好赌，豪爽，坚韧 喜欢的食物：嫩鸡，酒 讨厌的食物：甜食（丸子） 想挑战的对手：第三代火影 最爱的人：断（旦），绳树 亲人：初代目火影（爷爷）、二代目火影、断（爱人）、绳树（弟弟).兴趣：赌博、喝酒 自来也简介 姓名：自来也自来也 日文名： 罗马拼音：Jiraiya 查克拉属性：火、土 籍贯：火之国的木叶忍者村 声优：大冢芳忠 忍者登记号码：002301 出生日期：11/11（卒年54岁，
21、天蝎座） 祭日：2007年12月21日 身高：191.5CM 体重：89.5KG 血型：B 发型；白色刺猬头 绰号：蛤蟆仙人，超级大色鬼，好色仙人（鸣人叫的），小自来也 喜爱的食物：蒜蓉紫酥，炸鸡，腌萝卜 讨厌的食物：奇异果，奶汁烤菜，萝卜沙拉、煎蛋 想挑战的对手：个人主页课程设计报告第 17 页第三代火影 想追回的伙伴：大蛇丸(因偷学禁术,被发现,逃出木叶)但自来也放弃了! 喜爱的字句：自由奔放 师傅：三代目火影 徒弟：四代目火影（鸣人父亲），长门，弥彦，小南，鸣人 大蛇丸简介 姓名:大蛇丸 日文名: 大蛇丸罗马音译:Orochimaru 解读:Orochi (大蛇）maru（丸） 忍者登陆
22、番号:002300 晓中的搭档:赤砂之蝎、宇智波鼬 师傅:三代目火影（猿飞日斩） 晓组织代号:空陈 戒指:空 戒指佩戴位置:右手小拇指 通灵兽:万蛇 出生日期:10/27（54岁，天蝎座） 喜欢的食物:苹果，鸡蛋 讨厌的食物:冷的东西 身高:179.4cm(50岁) 身高:172.0cm(54岁) 体重:57.3kg 血液型:B型 发型:黑色长发 所属忍者村:木叶忍者村（以前）/音隐忍者村（现在） 所属国:火之国（以前）/田之国（现在） 性格:有野心，残忍，冷血、高傲 者之书中的大蛇丸 称号:与自来也、纲手二人一同被称为“三忍”。 忍具:草薙剑 特点:三代目火影的弟子，传说中的三忍之一，为达目
23、的不择手段。习惯像蛇一样吐舌头。 想挑战的对手:持有自己未知之术的人。 个人认为最有魅力的是:乌黑的头发与妩媚的微笑，舔舌头的动作。 喜爱的字句:破坏，混沌 兴趣:开发新忍术（禁术） 忍者学校毕业年龄:6 中忍升级年龄:？ 人物经验:D-16、C-332、B-521、A-491、S-108 八项数值:忍-10 体-7 贤-10 幻-10 力-7 速-9 精-7 印10 总计70（满分80） 日语声优:松本和香子，少年时期：山口真弓，女人时：小岛幸子 实力:超S .two.html,three.html,four.html,five.html 的源代码类似于 home.html。个人主页课程设计
24、报告第 18 页五、调试过程分析在本次网页设计过程中，出现了一些如下的问题，如网页排版，模块不显示，链接不上等。对于网页排版问题，在 Dreamweaver 中打开网页文件，根据在预览中模块的位置修改，如 logo 偏右，就在 Dreamweaver 中把 logo 往右移，直到达到想要的效果。效果如图 5-1 所示：模块不显示可能是引用文件格式不对，如在插入 Falsh 时插入的是 FLV 格式等，在 Dreamweaver 把模块删除再插入正确的格式即可。链接问题可能是引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片
25、等)六、网页的测试与发布网页制作完毕，最后要发布到 Web 服务器上，网站上传以后，在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把网址告诉给朋友，让他们来浏览。主要测试的方面有以下几点：1. UI 测试 看页面是否美观养眼(包括页面的布局是否合理,策划是否舒个人主页课程设计报告第 19 页服美观,页面长度是否合理,前景色与背景色是否搭配,页面风格是否统一,色调是否适合人眼,会不会太刺眼,字体大小是否合适,字体的颜色是否与背景色搭配,字体链接时是否会出现设置怪异的背景色,字体颜色有没有与背景色太接近或差距太大导致我们没办法看清字体或刺激
26、了我们的视觉,点击链接时图片和字体会不会产生移位)等。 2 .链接测试 点击链接时是否可以进入我们要找的页面,进入了我们要找的页面后能否正确返回,链接页面会不会是空白页面或孤立页面或根本没链接(也就是说链接的是自己本身),如果链接的是空白页我们是否可以再正确返回,如果使用了框架或内嵌框架是否可以正确在本框见页内显示要查找的页面,使用内容置顶时是否可以正确实现七、小结跟学习别的东西一样，学习网页设计也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果你没有耐心，你学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个
27、问题，用了半个月时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，你不断的学习，不要掉入技术的陷阱，你的网页设计技术一流，你对软件的掌握程度已经达到一定水平，但是你设计的网页却不堪目睹，这是因为网页设计是是介于平面设计和编程技术两者之间的“边缘科学.“不仅涉及到美学,心理学,平面构成，色彩搭配等平面设计方面分知识，还涉及到很多编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的 web 页面,才能全面展现互联网这一新型媒体的独特魅力和超强功能1.网页应易读 网站设计最重要的诀窍，恐怕就是你的网页要易读 。这就意味着,你必须花点心
28、思来规划文字与背景颜色的搭配方案。 注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳 。这个原则也意味着，你最好别把文字的个人主页课程设计报告第 20 页规格设得太小、也不能太大。文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。2. 网站导航要清晰 所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得
29、明白，千万别光顾视觉效果的热闹的，而让人家不知东西南北。 链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。如果你一定要别出心裁，链接的文本就要想着以什么方式加以突出，比如说加粗加字号、两侧加竖标、或者几者兼用。总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向 。 清晰导航还要求：读者进入目的页的点击次数，不能超过三次。如果三次以上还找不到，人家可就没有耐心陪你玩了！ 3. 网页风格要统一 其实，这个原则和传统的印刷出版物没什么区别。你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对
30、你的网站留下一个“很专业”的印象。 举个简单例子。如果你在列示一二三四若干条的情况下，在每条前面用黑圆点加强视觉效果，那么其他似地方，也应该用保持同样的风格。色彩斑斓的站点，尤其要注意风格的颜色可以变，不过字体、主体文本对齐风格、标题、背景效果以及特殊图像效果等等都应保持统一 。很多缺乏编辑、出版背景的网友，很容易忽视这点，特别是网页一多，更容易忘。以上便是在这次课程设计中的感受，我相信这将对我以后的学习网页这一门课程会有很大的帮助。希望能够通过自己的不断努力把这门课程学的更好、更透彻，而且在其他的课程中也应该这样多动手实践，多看资料书。参考文献1. 严争等.网页设计技术教程.清华大学出版社.北京交通大学出版社，2004个人主页课程设计报告第 21 页2. 2.飞思研发中心.Dreamweaver MX 中文版基础与实力教程.北京：电子工业出版社，20033. 浩胜等.中文 Fireworks MX 短期培训教程.北京：北京希望电子出版社，20024. 张星.网页设计 3 合 1 教程.北京：中国宇航出版社，20035. 严富昌.网站策划与设计.北京大学出版社，20046. 李长文，张云杰等.网页设计经典范例.清华大学出版社，20037. 朱顺泉.电子商务信息系统分析与设计. 清华大学出版社，20068.
