《网页制作》结课作业_第1页
《网页制作》结课作业_第2页
《网页制作》结课作业_第3页
《网页制作》结课作业_第4页
《网页制作》结课作业_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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（

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

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

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

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页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页能实现

8、网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度.现实意义我们本次通过设计个人网页主要是学习掌握HTML语言的用法，以及Dreamweaver的一些具体操作，还有学会运用一些Photoshop的知识。希望通过本次设计能够熟悉以上知识，并能够设计出好的网页。三、设计步骤：3.1准备工作：本站素材来源：火影中文网、百度、Google等，并结合Photoshop、123Flash等辅助软件制作网页背景、图标等素材。素材主要包括网站所需要的图片、火影忍者相关的文字说明如作者岸本齐史简介、火影忍者人物性格分析火影人忍者简介及剧情介绍等。前

9、期构思，主要完成网站主题框架设计如首页与分页面的逻辑结构、各分页面框架布局、首页框架布局、导航栏链接、完成基本的图像文字排版及部分较为简单的页面构思。在头脑里完成网站“火影之家”规划报告（草案）。3.2 Flash设计步骤：. 进入Flash软件的运行环境设置背景颜色为黑色。如图3-1所示： 图3-1将下面的线条重复的放在黑色的背景上面，会出现有种渐变色的感觉。如下图3-2所示：图3-2 还有图片的相应的切换，每张图片都是由模糊到清楚慢慢的变化。（需要编写程序实现这些功能）.在编程区域编写程序，源代码见程序源代码中（style.css）：.效果图如下： 图3-1 图3-2 图3-3 图3-4

10、图3-5 图3-63.3 HTML的编写步骤： .新建一个记事本文件。 .在文本文档中编辑自己的HTML代码。 .将文本文档的后缀名.txt改成.htm(或者 .html)。 .如果完成后的.htm文档需要修改可以：1.用文本文档的方式打开修改 2.选择IE浏览器查看-源文件修改网页中设计到的主要代码：获取图片代码:<img src="./images/#.gif" width="144" height="50">背景颜色设置：<body bgcolor="#d0d0d0"> 文字链接设置：

11、<a href="lastpage.htm">This text</a>图片链接设置：<u><a href="index.htm"><img src="./images/11.jpg" width="116" height="32"></a></u>3.4 Dreamweaver的设计步骤： .打开Dreamweaver主界面，单击菜单栏文件打开已经编写好index.Html等网页文件。.然后对index.Htm

12、l文件的排版进行设置，经过一段时间的调整，主界面基本形成。效果图如下所示： 图3-7 欢迎页面（1） 图3-7 欢迎页面（2）图3-7 欢迎页面（3）.子界面设置效果如下图所示： 图3-8 火影简介截图（1） 图3-8 火影简介截图（2）图3-8 火影简介截图（3） 图3-9人物简介页面截图（1） 图3-9人物简介页面截图（3）单击logo 链接到海贼网的官方网界面，界面截图下： 图3-10 链接界面截图四、程序源代码. style.css中的源代码如下：charset "utf-8"/* CSS Document */body font-size: 12px;margin

13、: 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;#indexmargin:0 auto;text-align:center;color:#ccff66;#index embedwidth:800px;height:600px;#index h1font

14、-size:36px;#index h2 acolor:#02e3e3;font-size:24px;text-decoration:none;#index h2 a:hovercolor:#ccff66;#header height: 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

15、);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 li margin-left:45px;line-height:80px;display: inline;#nav .nav_main ul.u1 width: auto;font-size: 20px;font-weight

16、: 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 .u1 li a:hover text-decoration: underline;color: #FC0;#nav .nav_main .u1 li .red color: #F00;#nav .nav_main .u1 li

17、 .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: 5px;padding-left: 5px;#nav .nav_main .u2 li a:hover color: #FFC;text-decoration: underline;#main height:1200px;width: auto;back

18、ground-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-repeat;background-position: center top;width: auto;#main_up_body width: 931px;margin: auto;height: 1200px;#news height: 1200px;widt

19、h: 930px;#news .news_main background:#d5ad4b;height: 1200px;text-align:center;overflow:auto;#news .news_main ptext-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 cente

20、r;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-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;.index.Html中的源代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitio

21、nal/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>火影忍者</title><link href="s

22、tyle/style.css" rel="stylesheet" type="text/css" /></head><body><div id="index"><h1>欢迎来到火影之家</h1> <h1><a href="home.html">ENTER</a></h1><embed src="images/index.swf" ></embed>&

23、lt;/div></body></html>.home.Html中的源代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Conten

24、t-Type" content="text/html; charset=utf-8" /><title>火影忍者</title><link href="style/style.css" rel="stylesheet" type="text/css" /></head><body><div id="header"></div><div id="nav"> <d

25、iv class="nav_main"> <ul class="u1"> <li><a href="home.html">火影简介</a></li> <li><a href="one.html">三代班</a></li> <li><a href="two.html">卡卡西班</a></li> <li><a href=

26、"three.html">阿斯玛班</a></li> <li><a href="four.html">凯班</a></li> <li><a href="five.html">红班</a></li> </ul> </div></div><div id="main"> <div id="main_up"> <d

27、iv id="main_up_body"> <div id="news"> <div class="news_main"> <img src="images/home.jpg"> <p>火影忍者是日本漫画家岸本齐史的代表作，作品自1999年开始在周刊少年JUMP上连载后，读者反应非常热烈。随后，火影忍者的TV动画在日本东京电视台播放，成为最受欢迎的动漫作品之一。故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，

28、描绘成了太阳下最值得骄傲最光明无限的的职业。在这个忍者的世界中，每一位年轻的主人翁都在开拓着属于自己的忍道。</p><p>这是一个忍者的世界。从小身上封印着邪恶的九尾妖狐，第一期鸣人受尽了村人的冷落，只是拼命用各种恶作剧试图吸引大家的注意力。好在还是有依鲁卡老师关心他，鸣人的性格才没有变得扭曲，他总是干劲十足，超级乐观。为了让更多的人认可自己，鸣人的目标是成为第六代火影！鸣人的同伴，是由老师确定的同班同学，随着共同的战斗，终于成了互相认可、信赖的好伙伴。 </p><p>这是一个忍者的世界。在Naruto的世界中，忍者这个职业，就像HunterXH

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

30、己终有一天能成为火影，他可是超级自信的哦。努力吧，鸣人！ 鸣人的同伴，是由老师确定的同班同学，一开始大家互相看不顺眼，不过随着共同的战斗，虽然面子上还是要斗一斗，但终于成了互相认可、互相信赖的好伙伴。同伴中照例有酷酷的帅哥佐助（还背负着复仇者的使命）和聪明可爱的女孩小樱，对手中有狡诈的超强Boss大蛇丸，孤独的杀手再不斩、冷酷嗜血、没人要的小孩我爱罗还有既有竞争又有互助的其他组的木叶同学们，虽然是少年漫画的传统设定，但是人物和故事都很精彩哦！ </p> </div> </div> </div> </div></div>&l

31、t;div id="flink"><a href=" src="images/1395332_op90.jpg" width="90" height="33" alt="logo" /></a><a href=" src="images/1395332_zwdzjs.jpg" width="90" height="33" alt="logo" /><

32、/a><a href=" src="images/logo.jpg" width="90" height="33" alt="logo" /></a><a href=" src="images/logo.jpg" width="90" height="33" alt="logo" /></a><a href=" src="images/1

33、661963_17dm.jpg" width="90" height="30" alt="logo" /></a></div></body></html>.one.Html中的源代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">&

34、lt;html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>火影忍者</title><link href="style/style.css" rel="stylesheet" type="text/css" /></

35、head><body><div id="header"></div><div id="nav"> <div class="nav_main"> <ul class="u1"> <li><a href="home.html">火影简介</a></li> <li><a href="one.html">三代班</a><

36、;/li> <li><a href="two.html">卡卡西班</a></li> <li><a href="three.html">阿斯玛班</a></li> <li><a href="four.html">凯班</a></li> <li><a href="five.html">红班</a></li> </ul

37、> </div></div><div id="main"> <div id="main_up"> <div id="main_up_body"> <div id="news"> <div class="news_main"> <img src="images/gang.jpg"> <p>纲手 基本资料 姓名：千手纲手 日文平假名： 日文片假名： 罗马拼音：tsu

38、na te 忍者登记号码：002302 级别：影级 现任：木叶村第五代火影 出生日期：8月2日 星座：狮子座 身高：163.1cm 体重：48.9kg 血型：B型 年龄：54岁 发型：黄色双马尾 擅长：医疗忍术、体术 派别：木叶忍者村医疗忍者 性格：好赌，豪爽，坚韧 喜欢的食物：嫩鸡，酒 讨厌的食物：甜食（丸子） 想挑战的对手：第三代火影 最爱的人：断（旦），绳树 亲人：初代目火影（爷爷）、二代目火影、断（爱人）、绳树（弟弟). 兴趣：赌博、喝酒 </p> <img src="images/zilai.jpg"> <p>自来也简介 姓名：

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

40、，小南，鸣人 </p> <img src="images/dashe.jpg"> <p> 大蛇丸简介姓名:大蛇丸 日文名: 大蛇丸罗马音译:Orochimaru 解读:Orochi (大蛇）maru（丸） 忍者登陆番号:002300 晓中的搭档:赤砂之蝎、宇智波鼬 师傅:三代目火影（猿飞日斩） 晓组织代号:空陈 戒指:空 戒指佩戴位置:右手小拇指 通灵兽:万蛇 出生日期:10/27（54岁，天蝎座） 喜欢的食物:苹果，鸡蛋 讨厌的食物:冷的东西 身高:179.4cm(50岁) 身高:172.0cm(54岁) 体重:57.3kg 血液型:B

41、型 发型:黑色长发 所属忍者村:木叶忍者村（以前）/音隐忍者村（现在） 所属国:火之国（以前）/田之国（现在） 性格:有野心，残忍，冷血、高傲 者之书中的大蛇丸 称号:与自来也、纲手二人一同被称为“三忍”。 忍具:草薙剑 特点:三代目火影的弟子，传说中的三忍之一，为达目的不择手段。习惯像蛇一样吐舌头。 想挑战的对手:持有自己未知之术的人。 个人认为最有魅力的是:乌黑的头发与妩媚的微笑，舔舌头的动作。 喜爱的字句:破坏，混沌 兴趣:开发新忍术（禁术） 忍者学校毕业年龄:6 中忍升级年龄:？ 人物经验:D-16、C-332、B-521、A-491、S-108 八项数值:忍-10 体-7 贤-10

42、幻-10 力-7 速-9 精-7 印10 总计70（满分80） 日语声优:松本和香子，少年时期：山口真弓，女人时：小岛幸子 实力:超S </p> </div> </div> </div> </div></div><div id="flink"><a href=" src="images/1395332_op90.jpg" width="90" height="33" alt="logo" />

43、;</a><a href=" src="images/1395332_zwdzjs.jpg" width="90" height="33" alt="logo" /></a><a href=" src="images/logo.jpg" width="90" height="33" alt="logo" /></a><a href=" src

44、="images/logo.jpg" width="90" height="33" alt="logo" /></a><a href=" src="images/1661963_17dm.jpg" width="90" height="30" alt="logo" /></a></div></body></html>.two.html,three.h

45、tml,four.html,five.html的源代码类似于home.html。五、调试过程分析在本次网页设计过程中，出现了一些如下的问题，如网页排版，模块不显示，链接不上等。对于网页排版问题，在Dreamweaver中打开网页文件，根据在预览中模块的位置修改，如logo偏右，就在Dreamweaver中把logo往右移，直到达到想要的效果。效果如图5-1所示：模块不显示可能是引用文件格式不对，如在插入Falsh时插入的是FLV格式等，在Dreamweaver把模块删除再插入正确的格式即可。链接问题可能是引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏

46、览链接文件，或无法显示插入的图片等)六、网页的测试与发布网页制作完毕，最后要发布到Web服务器上，网站上传以后，在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把网址告诉给朋友，让他们来浏览。主要测试的方面有以下几点：1. UI测试 看页面是否美观养眼(包括页面的布局是否合理,策划是否舒服美观,页面长度是否合理,前景色与背景色是否搭配,页面风格是否统一,色调是否适合人眼,会不会太刺眼,字体大小是否合适,字体的颜色是否与背景色搭配,字体链接时是否会出现设置怪异的背景色,字体颜色有没有与背景色太接近或差距太大导致我们没办法看清字体或刺激了我们的视觉,点击链接时图片和字体会不会产生移位)等。       2 .链接测试  点击链接时是否可以进入我们要找的页面,进入了我们要找的页面后能否正确返回,链接页面会不会是空白页面或孤立页面或根本没链接(也就是说链接的是自己本身),如果链接的是空白页我们是否可以再正确返回,如果使用了框架或内嵌框架是否可以正确在本框见页内显示要查找的页面,使用内容置顶时是否可

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论