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

_201703考试批次网页制作结课作业学生姓名 学习中心 学号 考 号 专 业 年级层次 北京语言大学网络教育学院网页制作结课作业注意：本学期所布置的结课作业，请同学一律按照以下要求执行：一、学生必须预约才能在学生平台看见相关课程的“结课作业”按钮；二、提交路径：个人平台首页-学习中的课程，点击该课程名称-点击“结课作业”-点击“浏览”按钮，选择要上传的文档后点击“提交作业”即可。三、结课作业提交起止时间：2017年1月21日-3月20日。（届时平台自动关闭，逾期不予接收。）四、提交的文档格式必须为word文档，截止日期前可多次提交，平台只保留最后一次提交的文档；五、严格按照课程名称提交相应课程结课作业，提交错误的结课作业，按0分处理。一、设计题目（请在以下网页设计作品中任选其一，最后整理一份网站设计与实现的报告即可，具体要求如下。总分100分）1、制作个人主页2、制作公司网站主页3、制作环保网站网页4、制作BBS注册网页5、制作购物网站6、制作班级主页7、制作家乡介绍网页8、制作汽车世界网页9、制作销售书店网页10、制作美食天下网页二、网站设计与实现具体要求1、设计题目：选择一个你最感兴趣的主题，进行网站设计与开发，网站内容具有实用价值。2、开发环境： 综合使用Dreamweaver CS、CSS、HTML、Flash CS、Fireworks CS、VBScrip（JAVAScript）等工具和语言，但动态网页制作不做硬性规定。3、内容要求： 内容不限，但要求主题思想明确； 具体的设计所需素材，可在网上查找，但不得有严重侵权行为，一经发现按零分处理。4、技术要求： 选用Div、表格、框架、层等若干技术设计和布局网页； 超级链接（一般链接、电子邮件、锚点等）的使用； 行为的运用、时间轴动画、JavaScript特效等； 其他：按自己的喜好，添加的其他技术效果。5、网站结构要求：网站页面组织结构清晰合理，要求站点至少要有三层结构，至少三个网页以上。网站中元素要包括：文字、图像、声音、Flash动画等。6、网页界面要求： 网页页面结构清晰、美观大方、形式新颖、内容充实、浏览方便、鼓励创新； 网页中没有错别字； 每页均可以返回首页和链接到其它页，每页都有导航条； 可以自己制作图片、动画等以增加网页展示效果。 7、网站文件结构：网站建立的文件目录结构应合理，除首页（index.html或index.htm）外，其它页文件、图片等应放在相应的文件夹下，并且所有文件名、文件夹名、图片名等都必须使用英文小写字母。三、撰写设计报告要求：最后整理一份网站设计与实现的报告，内容包括目录、需求分析、网站网页设计与实现内容，内容组织逻辑要合理，层次清晰，语言要准确通顺。其具体来讲最好有以下内容：1、网站主题介绍；2、网站需求描述；3、网站页面结构规划与设计、网站文件夹目录规划、网页布局规划与设计；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参考文献20-可编辑修改-_一、运行坏境 本网页主要基于windows XP /2000 或其他系列操作系统，安装有Flash播放器、网页三剑客：Macromedia Dreamweaver 、Macromedia Fireworks 、Macromedia Flash 的运行坏境。二、设计的目的和意义2.1课题的目的 由于本人比较喜欢火影，所以本次课程设计中主要是以火影为主要的素材。本次课程设计的主题是个人网页制作，我主要做了7个网页。网页主要是以flash为主，子网页主要是以介绍为主，其中包含了人物的特点、擅长的技能、图片，能够帮助火影爱好者更清晰的了解剧情里面的人物关系和自身的特点！还有各种关于火影相关的连接，能够比较系统的找到火影的相关信息，希望对广大感兴趣的人爱好者会有所帮助！ 个人网页设计是采用HTML、Dreamweaver、Photoshop等结合开发的，要进行网页的开发，必须对要Dreamweaver、flash、Photoshop等设计软件有所了解。而且还要熟悉利用HTML语法来编写网页代码。当然，还要有一定美术功底。2.2课题的意义：理论意义随着Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务.由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度.现实意义我们本次通过设计个人网页主要是学习掌握HTML语言的用法，以及Dreamweaver的一些具体操作，还有学会运用一些Photoshop的知识。希望通过本次设计能够熟悉以上知识，并能够设计出好的网页。三、设计步骤：3.1准备工作：本站素材来源：火影中文网、百度、Google等，并结合Photoshop、123Flash等辅助软件制作网页背景、图标等素材。素材主要包括网站所需要的图片、火影忍者相关的文字说明如作者岸本齐史简介、火影忍者人物性格分析火影人忍者简介及剧情介绍等。前期构思，主要完成网站主题框架设计如首页与分页面的逻辑结构、各分页面框架布局、首页框架布局、导航栏链接、完成基本的图像文字排版及部分较为简单的页面构思。在头脑里完成网站“火影之家”规划报告（草案）。3.2 Flash设计步骤：. 进入Flash软件的运行环境设置背景颜色为黑色。如图3-1所示： 图3-1将下面的线条重复的放在黑色的背景上面，会出现有种渐变色的感觉。如下图3-2所示：图3-2 还有图片的相应的切换，每张图片都是由模糊到清楚慢慢的变化。（需要编写程序实现这些功能）.在编程区域编写程序，源代码见程序源代码中（style.css）：.效果图如下： 图3-1 图3-2 图3-3 图3-4 图3-5 图3-63.3 HTML的编写步骤： .新建一个记事本文件。 .在文本文档中编辑自己的HTML代码。 .将文本文档的后缀名.txt改成.htm(或者 .html)。 .如果完成后的.htm文档需要修改可以：1.用文本文档的方式打开修改 2.选择IE浏览器查看-源文件修改网页中设计到的主要代码：获取图片代码:背景颜色设置： 文字链接设置：This text图片链接设置：3.4 Dreamweaver的设计步骤： .打开Dreamweaver主界面，单击菜单栏文件打开已经编写好index.Html等网页文件。.然后对index.Html文件的排版进行设置，经过一段时间的调整，主界面基本形成。效果图如下所示： 图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: 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-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);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: 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 .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;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-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;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 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-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;.index.Html中的源代码如下：火影忍者欢迎来到火影之家 ENTER.home.Html中的源代码如下：火影忍者 火影简介 三代班 卡卡西班 阿斯玛班 凯班 红班 火影忍者是日本漫画家岸本齐史的代表作，作品自1999年开始在周刊少年JUMP上连载后，读者反应非常热烈。随后，火影忍者的TV动画在日本东京电视台播放，成为最受欢迎的动漫作品之一。故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的的职业。在这个忍者的世界中，每一位年轻的主人翁都在开拓着属于自己的忍道。这是一个忍者的世界。从小身上封印着邪恶的九尾妖狐，第一期鸣人受尽了村人的冷落，只是拼命用各种恶作剧试图吸引大家的注意力。好在还是有依鲁卡老师关心他，鸣人的性格才没有变得扭曲，他总是干劲十足，超级乐观。为了让更多的人认可自己，鸣人的目标是成为第六代火影！鸣人的同伴，是由老师确定的同班同学，随着共同的战斗，终于成了互相认可、信赖的好伙伴。 这是一个忍者的世界。在Naruto的世界中，忍者这个职业，就像HunterXHunter里的猎人、One Piece里的海盗一样，是少年们的梦想！不过这回的主人公鸣人和自学成才的小冈、路飞不一样，他是木叶忍者村的忍者学校中科班毕业的哦（虽然毕业得很有些勉强，是被称为万年吊车尾的“差生”，汗）。 从小身上封印着邪恶的九尾妖狐，无父无母的鸣人受尽了村人的冷落，但是他却不知道原因，只是拼命用各种恶作剧试图吸引大家的注意力，人们却反而更远离他。好在还是有依卡鲁老师关心他，鸣人的性格才没有变得扭曲，他总是干劲十足，嘻嘻哈哈，超级乐观。为了让更多的人认可自己，鸣人的目标是成为第五代火影！这可是很高的目标哦，火影是世上最强的五位忍者之一的封号，也是木叶忍者村的首领。鸣人可不管，对于自己终有一天能成为火影，他可是超级自信的哦。努力吧，鸣人！ 鸣人的同伴，是由老师确定的同班同学，一开始大家互相看不顺眼，不过随着共同的战斗，虽然面子上还是要斗一斗，但终于成了互相认可、互相信赖的好伙伴。同伴中照例有酷酷的帅哥佐助（还背负着复仇者的使命）和聪明可爱的女孩小樱，对手中有狡诈的超强Boss大蛇丸，孤独的杀手再不斩、冷酷嗜血、没人要的小孩我爱罗还有既有竞争又有互助的其他组的木叶同学们，虽然是少年漫画的传统设定，但是人物和故事都很精彩哦！ .one.Html中的源代码如下：火影忍者 火影简介 三代班 卡卡西班 阿斯玛班 凯班 红班 纲手 基本资料 姓名：千手纲手 日文平假名： 日文片假名： 罗马拼音：tsu na te 忍者登记号码：002302 级别：影级 现任：木叶村第五代火影 出生日期：8月2日 星座：狮子座 身高：163.1cm 体重：48.9kg 血型：B型 年龄：54岁 发型：黄色双马尾 擅长：医疗忍术、体术 派别：木叶忍者村医疗忍者 性格：好赌，豪爽，坚韧 喜欢的食物：嫩鸡，酒 讨厌的食物：甜食（丸子） 想挑战的对手：第三代火影 最爱的人：断（旦），绳树 亲人：初代目火影（爷爷）、二代目火影、断（爱人）、绳树（弟弟). 兴趣：赌博、喝酒 自来也简介 姓名：自来也自来也 日文名： 罗马拼音：Jiraiya 查克拉属性：火、土 籍贯：火之国的木叶忍者村 声优：大冢芳忠 忍者登记号码：002301 出生日期：11/11（卒年54岁，天蝎座） 祭日：2007年12月21日 身高：191.5CM体重：89.5KG 血型：B 发型；白色刺猬头 绰号：蛤蟆仙人，超级大色鬼，好色仙人（鸣人叫的），小自来也 喜爱的食物：蒜蓉紫酥，炸鸡，腌萝卜 讨厌的食物：奇异果，奶汁烤菜，萝卜沙拉、煎蛋 想挑战的对手：第三代火影 想追回的伙伴：大蛇丸(因偷学禁术,被发现,逃出木叶)但自来也放弃了! 喜爱的字句：自由奔放 师傅：三代目火影 徒弟：四代目火影（鸣人父亲），长门，弥彦，小南，鸣人 大蛇丸简介姓名:大蛇丸 日文名: 大蛇丸罗马音译:Orochimaru 解读:Orochi (大蛇）maru（丸） 忍者登陆番号:002300 晓中的搭档:赤砂之蝎、宇智波鼬 师傅:三代目火影（猿飞日斩） 晓组织代号:空陈 戒指:空 戒指佩戴位置:右手小拇指 通灵兽:万蛇 出生日期:10/27（54岁，天蝎座） 喜欢的食物:苹果，鸡蛋 讨厌的食物:冷的东西 身高:179.4cm(50岁) 身高:172.0cm(54岁) 体重:57.3kg 血液型:B型 发型:黑色长发 所属忍者村:木叶忍者村（以前）/音隐忍者村（现在） 所属国:火之国（以前）/田之国（现在） 性格:有野心，残忍，冷血、高傲 者之书中的大蛇丸 称号:与自来也、纲手二人一同被称为“三忍”。 忍具:草薙剑 特点:三代目火影的弟子，传说中的三忍之一，为达目的不择手段。习惯像蛇一样吐舌头。 想挑战的对手:持有自己未知之术的人。 个人认为最有魅力的是:乌黑的头发与妩媚的微笑，舔舌头的动作。 喜爱的字句:破坏，混沌 兴趣:开发新忍术（禁术） 忍者学校毕业年龄: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所示：模块不显示可能是引用文件格式不对，如在插入Falsh时插入的是FLV格式等，在Dreamweaver把模块删除再插入正确的格式即可。链接问题可能是引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)六、网页的测试与发布网页制作完毕，最后要发布到Web服务器上，网站上传以后，在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把网址告诉给朋友，让他们来浏览。主要测试的方面有以下几点：1. UI测试 看页面是否美观养眼(包括页面的布局是否合理,策划是否舒服美观,页面长度是否合理,前景色与背景色是否搭配,页面风格是否统一,色调是否适合人眼,会不会太刺眼,字体大小是否合适,字体的颜色是否与背景色搭配,字体链接时是否会出现设置怪异的背景色,字体颜色有没有与背景色太接近或差距太大导致我们没办法看清字体或刺激了我们的视觉,点击链接时图片和字体会不会产生移位)等。 2 .链接测试 点击链接时是否可以进入我们要找的页面,进入了我们要找的页面后能否正确返回,链接页面会不会是空白页面或孤立页面或根本没链接(也就是说链接的是自己本身),如果链接的是空白页我们是否可以再正确返回,如果使用了框架或内嵌框架是否可以正确在本框见页内显示要查找的页面,使用内容置顶时是否可以正确实现七、小结跟学习别的东西一样，学习网页设计也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果你没有耐心，你学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了半个月时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，你不断的学习，不要掉入技术的陷阱，你的网页设计技术一流，你对软件的掌握程度已经达到一定水平，但是你设计的网页却不堪目睹，这是因为网页设计是是介于平面设计和编程技术两者之间的边缘科学.不仅涉及到美学,心理学,平面构成，色彩搭配等平面设计方面分知识，还涉及到很多编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和超强功能1.网页应易读 网站设计最重要的诀窍，恐怕就是你的网页要易读 。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。 注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳 。这个原则也意味着，你最好别把文字的规格设得太小、也不能太大。文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。2. 网站导航要清晰 所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得明白，千万别光顾视觉效果的热闹的，而让人家不知东西南北。 链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。如果你一定要别出心裁，链接的文本就要想着以什么方式加以突出，比如说加粗加字号、两侧加竖标、或者几者兼用。总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向 。 清晰导航还要求：读者进入目的页的点击次数，不能超过三次。如果三次以上还找不到，人家可就没有耐心陪你玩了！ 3. 网页风格要统一 其实，这个原则和传统的印刷出版物没什么区别。你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。 举个简单例子。如果你在列示一二三四若干条的情况下，在每条前面用黑圆点加强视觉效果，那么其他似地方，也应该用保持同样的风格。色彩斑斓的站点，尤其要注意风格的颜色可以变，不过字体、主体文本对齐风格、标题、背景效果以及特殊图像效果等等都应保持统一 。很多缺乏编辑、出版背景的网友，很容易忽视这点，特别是网页一多，更容易忘。以上便是在这次课程设计中的感受，我相信这将对我以后的学习网页这一门课程会有很大的帮助。希望能够通过自己的不断努力把这门课程学的更好、更透彻，而且在其他的课程中也应该这样多动手实践，多看资料书。参考文献1. 严争等.网页设计技术教程.清华大学出版社.北京交通大学出版社，20042. 2.飞思研发中心.Dreamweaver MX 中文版基础与实力教程.北京：电子工业出版社，20033. 浩胜等.中文Fireworks MX 短期培训教程.北京：北京希望电子出版社，20024. 张星.网页设计3合1教程.北京：中国宇航出版社，20035. 严富昌.网站策划与设计.北京大学出版社，20046. 李长文，张云杰等.网页设计经典范例.清华大学出版社，20037. 朱顺泉.电子商务信息系统分析与设计. 清华大学出版社，20068. www.baidu.com/www.google.cnTHANKS !致力为企业和个人提供合同协议，策划案计划书，学习课件等等打造全网一站式需求欢迎您的下载，资料仅供参考