《网页制作》结课作业.docx

1、201703 考试批次网页制作结课作业学生姓名 学号专业学习中心考号 年级层次网页制作结课作业注意：本学期所布置的结课作业，请同学一律按照以下要求执行：一、学生必须预约才能在学生平台看见相关课程的“结课作业”按钮；二、提交路径：个人平台首页-学习中的课程，点击该课程名称-点击“结课作业”-点击“浏览”按钮，选择要上传的文档后点击“提交作业”即可。三、结课作业提交起止时间：2017 年 1 月 21 日-3 月 20 日。（届时平台自动关闭，逾期不予接收。）四、提交的文档格式必须为 word 文档，截止日期前可多次提交，平台只保留最后一次提交的文档；五、严格按照课程名称提交相应课程结课作业，提交

2、错误的结课作业，按 0 分处理。一、设计题目（请在以下网页设计作品中任选其一，最后整理一份网站设计与 实现的报告即可，具体要求如下。总分 100 分）1、制作个人主页2、制作公司网站主页3、制作环保网站网页4、制作 BBS 注册网页5、制作购物网站6、制作班级主页7、制作家乡介绍网页8、制作汽车世界网页9、制作销售书店网页10、制作美食天下网页 二、网站设计与实现具体要求1、设计题目：选择一个你最感兴趣的主题，进行网站设计与开发，网站内容具有实用价值。2、开发环境：综合使用 Dreamweaver CS、CSS、HTML、Flash CS、Fireworks CS、VBScrip（JAVASc

3、ript） 等工具和语言，但动态网页制作不做硬性规定。3、内容要求： 内容不限，但要求主题思想明确； 具体的设计所需素材，可在网上查找，但不得有严重侵权行为，一经发现按零分处理。4、技术要求： 选用 Div、表格、框架、层等若干技术设计和布局网页； 超级链接（一般链接、电子邮件、锚点等）的使用； 行为的运用、时间轴动画、JavaScript 特效等； 其他：按自己的喜好，添加的其他技术效果。5、网站结构要求：网站页面组织结构清晰合理，要求站点至少要有三层结构，至少三个网页以上。网站中元素要包括：文字、图像、声音、Flash 动画等。6、网页界面要求： 网页页面结构清晰、美观大方、形式新颖、内容

4、充实、浏览方便、鼓励创新； 网页中没有错别字； 每页均可以返回首页和链接到其它页，每页都有导航条；可以自己制作图片、动画等以增加网页展示效果。7、网站文件结构：网站建立的文件目录结构应合理，除首页（index.html 或 index.htm）外，其它页文件、图片等应放在相应的文件夹下，并且所有文件名、文件夹名、图片名等都必须使用英文小写字母。三、撰写设计报告要求：最后整理一份网站设计与实现的报告，内容包括目录、需求分析、网站网页设计与实现内容，内容组织逻辑要合理，层次清晰，语言要准确通顺。其具体来讲最好有以下内容：1、网站主题介绍；2、网站需求描述；3、网站页面结构规划与设计、网站文件夹目录

5、规划、网页布局规划与设计；4、网页的实现（主要的步骤及实现代码等）；5、总结；6、按合理的顺序附主要源代码。四、评分总则1、作业成绩2、设计报告 内容逻辑组织合理，层次清晰； 内容充实，重点突出，详略得当； 观点表达正确，语言准确通顺； 图表制作正确规范； 排版规范美观。制 作 个 人 主 页目录一、运行坏境5二、设计的目的和意义52.1 课题的目的：52.2 课题的意义：5三、设计步骤：63.1 准备工作：63.2 Flash 设计步骤：63.3 HTML 的编写步骤：63.4 Dreamweaver 的设计步骤：6四、程序源代码10五、调试过程分析错误!未定义书签。六、网页的测试与发布错误

6、!未定义书签。七、小结错误!未定义书签。参考文献20一、运行坏境本网页主要基于 windows XP /2000 或其他系列操作系统，安装有 Flash 播放器、网页三剑客：Macromedia Dreamweaver 、Macromedia Fireworks 、Macromedia Flash 的运行坏境。二、设计的目的和意义2.1 课题的目的由于本人比较喜欢火影，所以本次课程设计中主要是以火影为主要的素材。本次课程设计的主题是个人网页制作，我主要做了 7 个网页。网页主要是以 flash 为主，子网页主要是以介绍为主，其中包含了人物的特点、擅长的技能、图片， 能够帮助火影爱好者更清晰的了

7、解剧情里面的人物关系和自身的特点！还有各种关于火影相关的连接，能够比较系统的找到火影的相关信息，希望对广大感兴趣的人爱好者会有所帮助！个人网页设计是采用 HTML、Dreamweaver、Photoshop 等结合开发的，要进行网页的开发，必须对要 Dreamweaver、flash、Photoshop 等设计软件有所了解。而且还要熟悉利用 HTML 语法来编写网页代码。当然，还要有一定美术功底。2.2 课题的意义：理论意义随着 Internet 在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务.由于 WEB 页面能把文本、图像、声音、动画、视像等多种媒体信息

8、集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时 WEB 页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度.现实意义我们本次通过设计个人网页主要是学习掌握 HTML 语言的用法，以及Dreamweaver 的一些具体操作，还有学会运用一些 Photoshop 的知识。希望通过本次设计能够熟悉以上知识，并能够设计出好的网页。三、设计步骤：3.1 准备工作：本站素材来源：火影中文网、百度、Google 等，并结合 Photoshop、123Flash 等辅助软件制作网页背景、图标等素材。素材主要包括网站所需

9、要的图片、火影忍者相关的文字说明如作者岸本齐史简介、火影忍者人物性格分析火影人忍者简介及剧情介绍等。前期构思，主要完成网站主题框架设计如首页与分页面的逻辑结构、各分页面框架布局、首页框架布局、导航栏链接、完成基本的图像文字排版及部分较为简单的页面构思。在头脑里完成网站“火影之家”规划报告（草案）。3.2 Flash 设计步骤：. 进入 Flash 软件的运行环境设置背景颜色为黑色。如图 3-1 所示：图 3-1将下面的线条重复的放在黑色的背景上面，会出现有种渐变色的感觉。如下图 3-2 所示：图 3-2图 3-1图图 3-5图图 3-4图3.3 HTML 的编写步骤：.新建一个记事本文件。.在

10、文本文档中编辑自己的 HTML 代码。.将文本文档的后缀名.txt 改成.htm(或者.html) 。.如果完成后的.htm 文档需要修改可以：1.用文本文档的方式打开修改2. 选择 IE 浏览器查看-源文件修改网页中设计到的主要代码：获取图片代码: 背景颜色设置：文字链接设置：This text图片链接设置：3.4 Dreamweaver 的设计步骤：.打开 Dreamweaver 主界面，单击菜单栏文件打开已经编写好 index.Html 等网页文件。.然后对 index.Html 文件的排版进行设置，经过一段时间的调整，主界面基本形成。效果图如下所示：图 3-7 欢迎页面（1）图 欢迎页

11、面（3丈火，终诮兮 至日本浸，回雾半本开士，的代表作， 作品白1穷今年开泊在JJI开l 心少年工兀千 上还药后i亨老反应牛书热和贬后， 丈火售缕3逊 的下丘祁且在曰本东示屯识台搏/1:l, 欢寸最受欢l!l!J灼动漫作品女一位事欢为屯拓，本陀意在凰诸中 用吐荣上最丐女的饮力劝最珊去 的研力士纨最壑不可宣和九古笠0 虳事情们忍右， 地主成T 太阳下最僅唱听骰最光咀无限的阳业在江图 3-8 火影简介截图（2）个忍者曲世觅中， 写一位年轻的主入廿都在开拓亏属于口己的思垣m这是一个忍名的甘界 从小身上书印着邪础内丸尼妖，扎第一期鸣人受尽了衬入的许喜， 只是拚令月各种昂作剧肚图敖引大京的迂 九 好扭 是

12、百仗鲁卡老师 心他日人的田台才役 屯变得扭曲， 他总是干谯十足， OO.乐威 为了让更多的人认可白己，屯人的目标是成为第六代火影I 屯人的同件， 是由毛芹唷定的同班同半，肛着共同的战斗，共于成了互忖认可 信忱的奸伙这是一个忍耆的杜!ii, 在Nm 血的世界中， 忍者这个印业壬偉比己心出m口里的滋入O 沁片区占扰准议盗一祥是少年们的梦 I 下过这口的主人公吐人和自竿成才的小冈J扩飞不一拌他是术斗见毛村的忍老学佼中补唗毕业的喷（虽然毕止需镶石竺勉悝， 是被称为可年吊车尺的言注勹 扦） 从小身上封印艺邓怒的丸谔钦扎无父无讶的屯入燮Jr-T 村入的冷喜， 但是忔却示郊避恩因，只是拚命用各种毯怍引试匣戙

13、引大东的汪毛人们力却反而更远高化好在还是行佐卡鲁毛师关心fll, 畸人的性特才没有变得扭片，也总是干劝十足，巴亨右咕，过经乐双为了让更多的人认可白己，屯人的目标是一 成为霓五代火影I 这可是很运的目行戙火影是世上呆歪的五位忍之者一的苗号， 世是木叶忍者村的百打一 应人可 不巹对千自己有 一天峻成为大影P忳可是 白甘的氓努 力屯， 巴, t,.巴人的同伴 是由老师溯定的同妇， 一开沁六东互相看不败民不过隧奢齐国的战斗，虽然面子上还是耍斗一斗， 但终千成了正I i 认可、互相信劝的好伙伴一同伴中庶刺可诰贴仇帅马佐贝（还背负苦 夏仇者的使希）和阴明可爱的女孮个樱，对手中夺决诈的杻强B. 大蛇丸， 孤

14、拍的杀手再不斩比 衿酗嗜血 没人要的小该我爱罗竞争又有互助的其他担的和同学fl , 虽生是少年漫田的传邸一定， 但是 伪和哉摹t 隔 行和平I（ 今已 釭 宅 邓 军 吓 单 l =笠 _图火影简介截图（3 ./扛忱杉山窃（日译）黄闭芳（凰行）井如黔义白柯）E年价 B l 2- 1J 岁（竿一手 ）， l6岁（疻戊佐助E百打裳名由 人一匕也i且回的曰诈 俨夭欧与 撇芯午存的无才忍毛 ，死百 :e;杂 IR的 干亏枚一拉的后百仔）“高 1 5D.&l: J . 2 一 （烹 11 ) . 迫 口已（死 尺，怀）E廿：重卫 423 屯一433 屯（挽;-i1） 5 2 卫书（安 ，戊妇 登记号刊1

15、 01出 的红 日ll？月lJ 曰 父母3 .,. 右谀盲云宁古谀蔓琴杆识钮宁它祚抛 盯习件ii 湛祝心 人 ， 寄 疗慢，坟木卞卞西 （丰一手 ， 军 七班) I 鬼灯木月亏磷， 天开重否（齐只沽， 11、1 从）E兴们生嘈3 丽增丘性 冷娑执着E喜受的 lli1i!ill 力量E喜曼的 食印 苍芍木丘饭司阳寸民的言 符3 千拦. 祚言E布望交于的对芍打 不叶的幕后拓屡任务败挽甘J D绶任务西 C戏 任务l口 B钱 晒 2 回 亟务涸 碟 ：任 务咂链接到海贼网的官方网界面，界面截图下：l 陶匠 航 囚 吐 冯 优 了 享他作殴雯氓 贰 王，幻寸，心03 潭一 1 区把凹江顽l劝 11 叩

16、3 ！闯躲 壬舅.,.谥夏们芘贬龙日1又 是一 个 下可天 m，它看曰的们漕陀定 如 心 l0 C，平1 1年 1 志 之 急心h谭 血劝 炯 己 ， 阳 撩 王 和 1 坻 1 也 因 队 立 廷 J漕配妇如伍巳狂硒了印覃吹心滚俨 氐 斗士也2填许特 叭减 百劝，归輩汪丑.眉 ,忑 杜汪 .猛三 liii.l如立们加 11 笠.,如 1也.,.但 阪王1 年行量凸史上言改日本至述 加 1也.,.-4 呻，压：漕 见王潭0111li霍撬过1111濬墅立 . 伍叶 抚 m 烹 ，阳撩王鬟6凶识虫人竺的 I 肚厥泗烽立响归l加 1 心 “ 周 鬻 王 E . 膏 -=: 如 三 古睬叩 竺妇垣轻含

17、少如 戏 卧i埔也 历丙？子 ”“ 仑凶， 猛抽赋，1!l东王 开院 l1帽R 池 灿 笠石呻 刁开伯如1心幻 厂如 1立 邓凶，心勾寸“卫妇潭 兄王潭d旷集止 血 念1 . 戊廿飞，图四、程序源代码. 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:

18、 #362a00;text-decoration: none;a:hover color: #ea0000;text-decoration: underline;#indexmargin: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:hover color:#ccff66;#header h

19、eight: 223px; width: auto;background-image: url(./images/header_bg.jpg); background-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

20、: auto; color: #FFC;#nav .nav_main ul margin: 0px; padding: 0px;#nav .nav_main ul li 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

21、a color: #FC0;text-decoration: none; padding-right: 5px; padding-left: 5px;#nav .nav_main .u1 li a:hover text-decoration: underline;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

22、: 2px;#nav .nav_main .u2 li a color: #FFC;text-decoration: none; padding-right: 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: rep

23、eat-y;#main_up background-image: url(./images/up_bg.jpg); background-repeat: no-repeat;background-position: center top; width: auto;#main_up_body width: 931px; margin: auto; height: 1200px;#news height: 1200px; width: 930px;#news .news_main background:#d5ad4b; height: 1200px; text-align:center; over

24、flow:auto;#news .news_main p text-align:left; font-size:16px; line-height:180%; 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:

25、70px;#flink img padding-right: 3px; padding-left: 3px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;.index.Html 中的源代码如下：火影忍者欢迎来到火影之家 ENTER.home.Html 中的源代码如下：火影忍者火影简介三代班卡卡西班阿斯玛班凯班红班火影忍者是日本漫画家岸本齐史的代表作，作品自1999年开始在周刊少年JUMP上连载后，读者反应非常热烈。随后，火影忍者的TV动画在日本东

26、京电视台播放，成为最受欢迎的动漫作品之一。故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的的职业。在这个忍者的世界中，每一位年轻的主人翁都在开拓着属于自己的忍道。这是一个忍者的世界。从小身上封印着邪恶的九尾妖狐，第一期鸣人受尽了村人的冷落，只是拼命用各种恶作剧试图吸引大家的注意力。好在还是有依鲁卡老师关心他，鸣人的性格才没有变得扭曲，他总是干劲十足，超级乐观。为了让更多的人认可自己，鸣人的目标是成为第六代火影！鸣人的同伴，是由老师确定的同班同学，随着共同的战斗，终于成了互相认可、信赖的好伙伴。这是一个忍者

27、的世界。在Naruto的世界中，忍者这个职业，就像HunterXHunter里的猎人、One Piece里的海盗一样，是少年们的梦想！不过这回的主人公鸣人和自学成才的小冈、路飞不一样，他是木叶忍者村的忍者学校中科班毕业的哦（虽然毕业得很有些勉强，是被称为万年吊车尾的“差生”，汗）。 从小身上封印着邪恶的九尾妖狐， 无父无母的鸣人受尽了村人的冷落，但是他却不知道原因，只是拼命用各种恶作剧试图吸引大家的注意力，人们却反而更远离他。好在还是有依卡鲁老师关心他，鸣人的性格才没有变得扭曲，他总是干劲十足，嘻嘻哈哈，超级乐观。为了让更多的人认可自己，鸣人的目标是成为第五代火影！这可是很高的目标哦，火影是世

28、上最强的五位忍者之一的封号，也是木叶忍者村的首领。鸣人可不管，对于自己终有一天能成为火影，他可是超级自信的哦。努力吧，鸣人！ 鸣人的同伴，是由老师确定的同班同学，一开始大家互相看不顺眼，不过随着共同的战斗，虽然面子上还是要斗一斗，但终于成了互相认可、互相信赖的好伙伴。同伴中照例有酷酷的帅哥佐助（还背负着复仇者的使命）和聪明可爱的女孩小樱，对手中有狡诈的超强Boss大蛇丸，孤独的杀手再不斩、冷酷嗜血、没人要的小孩我爱罗还有既有竞争又有互助的其他组的木叶同学们，虽然是少年漫画的传统设定，但是人物和故事都很精彩哦！.one.Html 中的源代码如下：火影忍者火影简介三代班卡卡西班阿斯玛班凯班红班纲手

29、基本资料姓名：千手纲手日文平假名：日文片假名：罗马拼音：tsu na te忍者登记号码：002302级别：影级现任：木叶村第五代火影出生日期：8月2日星座：狮子座身高：163.1cm体重：48.9kg血型：B型年龄：54岁发型：黄色双马尾擅长：医疗忍术、体术派别：木叶忍者村医疗忍者性格：好赌，豪爽，坚韧喜欢的食物：嫩鸡，酒讨厌的食物：甜食（丸子）想挑战的对手：第三代火影最爱的人： 断（旦），绳树亲人：初代目火影（爷爷）、二代目火影、断（爱人）、绳树（弟弟). 兴趣：赌博、喝酒自来也简介姓名：自来也自来也日文名：罗马拼音： Jiraiya查克拉属性：火、土籍贯：火之国的木叶忍者村声优：大冢芳忠

30、忍者登记号码：002301出生日期：11/11（卒年54岁，天蝎座）祭日：2007年12月21日身高：191.5CM体重：89.5KG血型：B发型；白色刺猬头绰号： 蛤蟆仙人，超级大色鬼，好色仙人（鸣人叫的），小自来也喜爱的食物：蒜蓉紫酥， 炸鸡，腌萝卜讨厌的食物：奇异果，奶汁烤菜，萝卜沙拉、煎蛋想挑战的对手： 第三代火影想追回的伙伴：大蛇丸(因偷学禁术,被发现,逃出木叶)但自来也放弃了!喜爱的字句：自由奔放师傅：三代目火影徒弟：四代目火影（鸣人父亲），长门， 弥彦，小南，鸣人 大蛇丸简介姓名:大蛇丸日文名:大蛇丸罗马音译:Orochimaru解读:Orochi (大蛇）maru（丸）忍者登陆

31、番号:002300晓中的搭档 :赤砂之蝎、宇智波鼬师傅:三代目火影（猿飞日斩）晓组织代号:空陈戒指:空戒指佩戴位置:右手小拇指通灵兽:万蛇出生日期:10/27（54岁，天蝎座）喜欢的食物:苹果，鸡蛋讨厌的食物:冷的东西身高:179.4cm(50岁)身高:172.0cm(54岁)体重:57.3kg 血液型:B型 发型:黑色长发 所属忍者村:木叶忍者村（以前）/音隐忍者村（现在） 所属国:火之国（以前）/田之国（现在） 性格:有野心，残忍，冷血、高傲 者之书中的大蛇丸 称号:与自来也、纲手二人一同被称为“三忍”。 忍具:草薙剑 特点:三代目火影的弟子，传说中的三忍之一，为达目的不择手段。习惯像蛇一

32、样吐舌头。 想挑战的对手:持有自己未知之术的人。 个人认为最有魅力的是:乌黑的头发与妩媚的微笑，舔舌头的动作。 喜爱的字句:破坏，混沌 兴趣:开发新忍术（禁术） 忍者学校毕业年龄: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。五、调试过程分析在本次网页设计过程中，出现了一些如下的问题，如网页排版，模块不显示， 链接不上等。对于网页排版问题，在 Dreamweaver 中打开网页文件，根据在预览中模块的位置修改，如 logo 偏右，就在 Dreamweaver 中把 logo 往右移，直到达到想要的效果。效果如图 5-1 所示：