个人求职网站设计与实现

任务书题目名称个人求职网站设计与实现毕业设计（论文）内容与要求：内容：1．所提出的问题在本专业学科领域内有一定的理论意义或实际意义，并通过独立研究，提出了自己一定的认识和看法；2．能够以自己有力而周密的分析，澄清在某一问题上的混乱看法。虽然没有更新的见解，但能够为别人再研究这一问题提供一些必要的条件和方法。3．在联系方式页面找到你的联系方式；4．适当采用CSS样式对网站的文本、超链接等样式进行有效地控制；5．在我的资料页面能够看到求职者资料；6．采用图片处理软件对图片进行处理与加工，使网站有美感；要求：1．作品应该是个人独自完成，不得盗用和抄袭他人的作品；2．网站的设计应该遵循色彩协调、美观大方；3．网站要有独特的构思和创意，网站内的链接都应正常；4.要求毕业设计说明书应由摘要、目录、前言、正文、结论、参考文献、致谢等几部分组成；5．要注意思维和论述首尾一贯，明白确切。绪论，说明本课题的意义、目的、研究范围及要达到的技术要求。毕业设计（论文）成绩考核表过程评分评阅成绩答辩成绩总成绩百分制等级制指导教师评语建议成绩指导教师签字：年月日论文评阅教师评语建议成绩评阅教师签字：年月日毕业答辩专家组评语建议成绩答辩组长签字：年月日毕业设计领导小组推优评语组长签字：年月日摘要随着科学技术的发展，传统的求职方式如推荐表无论从速度、效率，还是从方便程度上都远远不能达到求职者的需求，需要一种速度更快，效率更高，更方便的求职方式来代替传统的求职方式。在网络技术和信息技术迅猛发展的今天，出现了大量求职方式，如电话等，这些求职方式的效率远远比传统的高出许多，但它们都存在一定程度的弱点，如网上有很多求职只是登记了一个名字和个人资料之类的东西，别人根本不知道你的能力如何，而且由于现在这种求职方式到处都是，登记的人也是数不胜数，求职成功的机会非常的小。因此，还需要一种比这更有效的求职方式的出现。而个人求职网站则可以克服这些弱点。个人求职网站利用网站强大的功能，将个人资料和个人作品集成于一体，将一个个精彩的个人作品生动活泼地展示在用人单位的面前，使用人单位一看便对求职者的个人能力有一个初步的了解，从而对求职者留下了深刻的印象。同时，个人求职网站极为灵活的交互功能，把用人单位从原来一次次打电话联系而找不到人的烦恼中解脱出来，通过留言板很容易的就可以把本单位对求职者的看法及意见反就上去。而求职者随时都可以看到。在Internet高速发展的今天，个人求职网站有了它广阔的应用前景，由于现在很多免费空间的出现，给很多求职者制作个人求职网站提供了很大的方便，求职者可以很方便的把自己的网站发布到Interne中去，让全国甚至全世界的用人单位都可以很方便的看到，从而避免了以前的拿着推荐表到处找工作的麻烦，并且，个人求职网站不用像推荐表一样去一家公司要一份，出去也用不着带到身上，不仅节约了求职者的金钱，也节约了求职者的时间，更是提高了求职效率。关键词：网站；求职；信息；招聘

ABSTRACTWiththedevelopmentofscienceandtechnology,traditionalwayssuchasrecommendedlistfromthespeed,efficiency,orfromtheconveniencedegreeisnotreachedtheapplicantneeds,needafaster,moreefficientandmoreconvenienttoreplacethetraditionaljobapplication.Innetworktechnologyandtherapiddevelopmentofinformationtechnology,thejobtoday,suchastelephone,etc,thesejob-huntingwaythanthetraditionalefficiencyofmany,buttheyallexistcertainandweaknesses,suchasInternethasmanyjobjustregisteranameandpersonalmaterialthings,peopledon'tknowhowyourability,andbecauseofthisjobwayiseverywhere,registration,applicationofcountlesschancesofsuccessisverysmall.Therefore,alsoneedamoreeffectivethanthejob.Andindividualwayofjobsitescanovercometheseweaknesses.Personalwebsitesusingthepowerfulfunctions,personaldataandpersonalworksintegratedintoanorganicwhole,awonderfulworkswillshowlivelyinfrontofunitofchooseandemploypersons,unitofuserlookingforcandidatesofpersonalabilityhaveapreliminaryunderstandingofjobseekers,whichleftadeepimpression.Atthesametime,theindividualisflexibleemploymentnetinteraction,theunitofchooseandemploypersonsfromtheoriginalcallagainandfindpeoplecontacttroublesfreed,throughthemessageboardeasilycantakethisunittoapplyforajobpersonviewsandopinionsagainstwentup.Anyapplicantandcanbeseen.IntherapiddevelopmentofInternet,individualjobsiteshavetodayitbroadprospectofapplication,becausenowmanyfreespace,givemanyjobseekersmakepersonalemploymentwebsiteprovidesgreatconvenience,theapplicantmaybereleasedtotheirwebsite,lettheInterneunitofchooseandemploypersonsandtheworldcanbeeasilyseensoastoavoidtheformertooktheformoftrouble,everywherefindwork,andtheindividualjobsitesdon'tliketorecommendacompanytowatch,alsoneedn'tgoto,notonlysavethemoneyandjobapplicants,savethetimeistoimprovetheefficiencyofapplication.Keywords：website；Cover；Information；recruitment

目录TOC\o"1-2"\u引言 1第一章个人求职网站的需求分析 21.1个人求职网站介绍 21.2课题的目的和意义 21.3开发模式、工具及环境 21.4网页制作注意事项 4第二章个人求职网站模块的建设与分析 92.1静态网页的制作与实现 92.2个人求职网站的模块介绍 9第三章网站的测试 443.1测试 443.2错误原因与纠正 44结论 45参考文献 46致谢 47引言现在许多在校大学生都面临就业，我们当前就业形势的分析是，中国在未来几年的就业压力依然很大，就业形势依然严峻。根据教育部门的统计，当年大学毕业生在离校前后的就业率大约为70%左右。也就是说，有30%的当期大学生在毕业离校时还没有找到工作。去年我国大学毕业生是413万，30%没有找到工作，就是有120多万大学生在离校时还没有就业。再加上今年毕业大学生495万，比去年增加了82万，所以今年要求职的大学毕业生总量在600万人左右。每年到了这个时候，往往是大学生寻找工作最繁忙的季节。对于一个即将步入社会的学子来说，第一份工作找得好不好，一定程度上直接关系到未来的前途。不过，对部分大学生来说，现在的关键恐怕不是挑三捡四，而是能不能顺利就业的问题。“大学生就业难”的声音出现了好几年，而多数毕业生最后还是找到了适合自己的工作，或者开始自主创业，规划着自己的人生。本毕业设计拟实现一个个人求职网站，运用网页三剑客Dreamweaver8.0、fireworks8.0、Flash8.0等工具实现。第一章个人求职网站的需求分析1.1个人求职网站介绍本网站实现了一个网络投简历系统，提供了一个基于网络的交流平台，在这个平台上，工作提供者（公司方）阅读求职者信息；另一方面，求职者通过填写自身的信息，专业所长自身简历，提供联系方式供工作提供者（公司方）联系。1.2课题的目的和意义现如今传统的求职方式越来越不能满足当今企业和求职者的需要。随着Internet的发展网络上兴起了很多求职网站。求职网站的出现，给求职者和招聘单位带来了很大的方便，但目前针对我们在校大学生、应聘毕业的求职网站很少，并且现有的这些针对在校大学生的求职网站都是以营利为目的，很多得不到大学生的信任。本毕业设计拟实现一个个人求职网站。1.3开发模式、工具及环境1.3.1开发工具：在开发个人求职网站的工具上我选用了以下网页制作工具开发：1、Dreamweaver8.0Dreamweaver8.0是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。2、Flash8.0Flash是近些年才出现的一种新的事物，他是网页设计三剑客中的一款多媒体动画制作软件。它是一种交互式动画设计工具，用它可以将音乐，声效，动画方便地融合在一起，以制作出高品质的动态效果，或者说是动画。采用此软件进行页面的动画的制作，来增加页面的美观。3、fireworks8.0MacromediaFireworks：Macromedia开发的图像软件，借助于MacromediaFireworks8，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与MacromediaDreamweaver®和MacromediaFlash®共同构成的集成工作流程可以让您创建并优化图像，同时又能避免由于进行Roundtrip编辑而丢失信息或浪费时间。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如完成大图切割，变换图像和弹出菜单等。它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。网页设计三剑客的三款软件的完美结合让网页设计事半功倍，同时也让在网页设计中的动画和图片的更融洽的结合在一起，让你设计的网站更加的完美。开发环境要运行本系统，须提供如下环境：1、硬件要求：CPU：PentiumⅢ733或以上之兼容机；内存：128MB或以上容量；显卡：16MB或以上显存之AGP接口绘图卡；硬盘：至少100MB剩余空间。网卡和网络适配器2、软件要求：操作系统：MicrosoftWindows2000/XP/2003简体中文版；开发工具：Dreamweaver8.0；文档工具：MicrosoftWord2000/XP/2003简体中文版；图片工具：fireworks8.0或AdobePhotoshop6.0/7.0/CS简体中文版；网站发展背景：首先，当前高校毕业生的就业制度逐步实现了与社会主义市场经济的接轨，“市场导向、政府调控、学校推荐、学生与用人单位双向选择”的就业机制基本形成。其次，我国自1999年大学开始扩招以来，大学生就业问题日趋严峻，大学毕业生的就业率呈现总体下降的趋势，就业难已经成为制约高等教育事业健康发展和影响社会稳定的重要问题。据统计，2007年全国高校应届毕业生将达到495万人，严峻的就业形势牵动着社会各界的神经，很多毕业生将要面对“一毕业，即待业”的窘境。最后，在大学生抱怨找工作难的同时，企业界也普遍反映难招到合适的人才，很多企业抱怨他们花了大量的成本去招聘并培训应届毕业生，但效率、效果均不尽人意。据权威调查报告显示：45%的企业招不到合适的人，50%的人找不到合适的工作，从这个数据反映出大学生就业问题不仅是“难找工作”的问题，也包括了企业“难招合适人”的问题。

这就是新形势下结构性失业的社会问题。由此衍生出了网络招聘系统，给广大的高校应届毕业生提供了更加广阔的就业环境，也给了广大的高校应届毕业生更加广阔的选择。1.4网页制作注意事项网站的页面设计：网站页面是浏览者对整个网站的普遍的感觉，是页面的版式、色调及图文组合的高度抽象。而网站的创意则是在设计之前对内容的选择和表现形式运用的思考，力求个性的发挥。在茫茫网海没有创意的网站很快就会被人遗忘。网站页面的风格：页面的美化首先要考虑风格的定位。任何页面都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。目前网页的应用范围日益扩大，几乎包括了所有的行业，林林总总，包罗万象，但归纳起来大体有这么几个大类：新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络中心等。对于不同性质的行业，应体现出不同的页面风格，就像穿着打扮，应依不同的性别以及年龄层次而异一样。例如：政府部门的主页风格一般应比较庄重，而娱乐行业则可以活泼生动一些；商务主页则可以贴近民俗，使大众喜闻乐见；文化教育部门的主页风格应该高雅大方、格调清新，不宜太花。对于画面风格的选择：需要考虑是写实还是写意，是体现专业性还是大众化，是为儿童还是为成人。对形式的简繁的选择：是追求简洁还是花哨，不同性质的网站在这方面会有不同。如艺术网站，会不厌其烦地用各种手法来展示其创意。对于色调选择：是活泼还是庄重，是素还是艳，比如食品网站应选择的色彩很艳丽，如果选择素的色彩，可能就无法体现出水果和蔬菜的那种生气，而工艺品网站的色调是以素为主，突出了手工艺品的典雅。页面风格的形成主要依赖于页面的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，往往需要主页的设计和制作者具有一定的美术素质和修养。要使主页设计、制作得美观大方、切合主题，必然离不开对主页进行艺术的加工和处理。由于设计经验不足，又非艺术专业学生，我们决定将页面设计为清新简洁的风格，以显其朴素大方之美。网站页面的编排：页面的设计首先涉及到的是页面的版面编排问题。“页面编排”实际上就是中国古代画论中的“经营位置”。网页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大的观众。主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题。“设计，是一种有目的的创造”。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。对于页面的布局我们主要依据如下几条原则来做：(1)主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。(2)大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。(3)图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使页面有丰富的内容。网页的色彩处理：色彩，网站风格之魂、创意之先锋。色彩是人的视觉最敏感的东西也是最持久地给浏览者以网站形象的因素。页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。其实，色彩是网站形象是营销环节中非常重要的一个部分，如同人的衣着一样，信息空间的构造也需要恰如其分的包装。网站的内容不仅仅是由文字组成的，视觉元素在网站中也占有重要的位置。色彩总的应用原则应该是“总体协调，局部对比”，也就是：页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。网站中的网页用色方面应用掌握或注意以下几方面；（1）网页色彩搭配的原理：色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。色彩的独特性。要有与众不同的色彩，使得大家对你网站的印象强烈。色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。（2）网页色彩搭配的技巧：用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。用两种色彩。先选定一种色彩，然后选择它的对比色。用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。（3）运用过多种类的颜色：在网页配色中，忌讳的是不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)以便突出主要文字内容。（4）选择适合内容风格的颜色：色彩有冷暖的感觉。如儿童类站点不要用冷色系，且颜色要丰富一些。色彩有柔软和坚硬感。同色相，明度高，则有柔软感；明度低，则会有坚硬感。女性站点，适量选用柔美的粉淡色或高级灰，而男性类站点，就可使用棕色深蓝色。从色相看，暖色调给人的感觉华丽；从明度看，明度高给人的感觉华丽。由此首饰类站点可以使用高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅蓝色。色彩明度的高低与声音的高低相关，强烈的色彩如亮黄色、鲜红色，具有尖锐高亢的音乐感。暗浊色如海蓝色、深灰色等具有低沉浑厚的音乐感。现代音像艺术正是采用了视觉与听觉等多媒体相结合的方法，展现了丰富、新颖的视听效果。根据色彩的味觉感。绿色、黄绿色是未成熟的果实色彩，有酸、涩的味感。橙色、浅黄色、浅棕色、粉红色使人想到成熟的瓜果色彩而产生甜甜的味感。设计饮食类站点可以遵循以上原则。最后，应吸取前人已有的配色经验，并应用到设计的网站中，以下为本设计小组从网上搜索并精选的几条：1．确定主体色遵循主从关系，这是最稳定的处理色彩原则。红、黄、绿、紫等每一个字都代表一类具体的颜色，也就是色相，客观存在，它是指色彩的相貌，是区别色彩种类的名称。在页面上，除白色为背景色外大量使用的颜色，就是这个网页的主体颜色。如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定哪个是主体色。2．相近色选择色彩相近的颜色，非常容易搭配。如在红色里面加白色，红色就会越来越亮。而加黑色，红色就越来越暗，明度降低。所以色彩的明度就是指任何一种颜色的明暗度。假设在蓝色里面加黑、白、灰，或另一种颜色，就会使得蓝色不纯，不再鲜艳。那么色彩的纯度就是指色彩系中每一个颜色的鲜艳程度。同色系（同色相）的几种颜色容易搭配，如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题；同一页面尽量不要多出4种颜色。链接的色彩搭配也是遵循以上的原则。而文字颜色的搭配，则要与背景分离。这样才可以很明确的传达我们要表现的东西。我们要突出的图形文字的颜色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。3．色彩均衡它是比较保险的配色互补原则。多种颜色同时存在的时候不容易把握好，一定要调和统一。在网页设计中，如果运用了较多明度较高的颜色，就可以用黑色，或同色相的深色小面积压一下，点缀一下，使得页面不要太轻，达到色彩重量的平衡。平衡的颜色较符合多数人的色彩心理。根据情况，如选择黑色，可能会严肃和庄重，而用同色相的深色，则轻松些。4．黑白灰运用其实黑白灰是宝贝，万不可小看它们。如果在用色上遇到麻烦，可以大面积的加白，灰；小面积加加黑来调节其他颜色搭配不当。遇到使用纯度很高的颜色，比如纯蓝、纯黄等，这样的搭配会很鲜艳，视觉感觉比较兴奋。把这样的颜色明度抬高或降低，搭配上灰、白色，也是调节的方法。本网站的在色彩处理上就用了黑色系。

第二章个人求职网站模块的建设与分析2.1静态网页的制作与实现我这次做的这个网站做的是一个静态的页面，所以在设计的过程中非常重视其中的布局，我运用Dreamweaver8.0这个软件来制作框架，并用CSS进行页面的布局，并在网页中插入一些透明的Flash，使网页能有更好的浏览效果。在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。另外，在网页的制作过程中，我还考虑到了网站颜色的搭配，这是一个很重要的问题，好果网站的颜色搭配不好，会给使用者带来一种不好的感觉，这样便会影响网站的价值，也没达到我们设计网站的目的。在制作过程中，我多次与同学共同探讨，并虚心接受她们的建议，多次对网站的风格进行设置与改进。在网站风格设置上，我考虑到整个网站风格的统一，所以，界面虽然简单，却很清新，给人一种耳目一新的感觉。2.2个人求职网站的模块介绍我的个人求职网站，整个网站由6个部分构成，分别是(欢迎界面、首页、个人宣言、自我展示、我的资料、联系方式)构成。欢迎界面是整个个人求职页面的一个进入，在欢迎界面我加入了一个FLASH，使得整个界面看起来更加的具有3D感。首页是我的个人求职网站的展示，在首页可以看到4个衔接分别是：个人宣言、自我展示、我的资料、联系方式。个人宣言是我对工作的一种努力认真的态度，自我展示主要是提供给工作提供方（公司方）展示我富有朝气的面目，使得后期我在面试过程中更加的具有竞争力，我的资料是给工作提供方（公司方）查阅我的资料，详细的了解我所获得的奖项，学习成绩，所参加的培训，让工作提供方（公司方）在一定程度上了解我，联系方式是为让工作提供方（公司方）有信息联系我，并且我在各个模块中均加入特殊的特效代码，如鼠标特效、时钟特效、背景特效、滚动字幕特效等。这样使得我的个人求职网站更加的具有吸引力、活力。具体网站界面如下：我的个人求职网站欢迎界面：图2.1我的个人求职网站欢迎界面欢迎界面是所有整体网站的一个起点，在这个页面我在顶部加入了“欢迎光临尹立志个人求职网站”的滚动字幕，并且把鼠标做了一个飘逸字跟随的特效，点击页面右边的FLASH进入我的个人求职网站首页，整个界面详见（见上图2.1）1．其中滚动字幕代码为：<marqueedirection="right"scrollamount="5"scrolldelay="88">欢迎光临尹立志个人求职网站</marquee>2．鼠标特效的代码为：<html><head><script>varx,yvarstep=40varflag=0varmessage="欢迎来到尹立志的个人求职网站"message=message.split("")varxpos=newArray()for(i=0;i<=message.length;i++){xpos[i]=-50}varypos=newArray()for(i=0;i<=message.length;i++){ypos[i]=-50}functionhandlerMM(e){x=(document.layers)?e.pageX:document.body.scrollLeft+event.clientXy=(document.layers)?e.pageY:document.body.scrollTop+event.clientYflag=1}functionmakeit(){if(flag==1&&document.all){for(i=message.length;i>=1;i--){xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1] }xpos[0]=x+stepypos[0]=yfor(i=0;i<message.length;i++){varthisspan=eval("span"+(i)+".style")thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i] } }elseif(flag==1&&document.layers){for(i=message.length;i>=1;i--){xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1] }xpos[0]=x+stepypos[0]=yfor(i=0;i<message.length;i++){varthisspan=eval("document.span"+i)thisspan.left=xpos[i]thisspan.top=ypos[i]} }vartimer=setTimeout("makeit()",30)}for(i=0;i<=message.length;i++){document.write("<spanid='span"+i+"'class='spanstyle'>")document.write(message[i])document.write("</span>")}if(document.layers){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove=handlerMM;</script><styletype="text/css">.spanstyle{position:absolute;visibility:visible;top:-50px;font-size:9pt;color:#c800c0;font-weight:bold;}</style></head><bodyonLoad="makeit()">3．该页面用到的主要代码有：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>尹立志的个人求职网站</title><styletype="text/css"><!--body{background-color:#000000;margin-left:0px;margin-top:2px;margin-right:0px;margin-bottom:0px;}--></style><linkhref="css.css"rel="stylesheet"type="text/css"></head><body><tablewidth="990"height="590"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#666666"><tr><tdwidth="40%"height="595"align="center"valign="middle"bgcolor="#FFFFFF"><ahref="cover.htm"target="1"><imgname="home_r3_c3"src="images/home_r3_c3.gif"width="215"height="77"border="0"alt=""></a></td><tdwidth="58%"align="center"><iframescrolling="auto"src="cover.htm"width="580"height="590"name="1"></iframe></td></tr></table></body></html>我的个人求职网站首页：图2.2我的个人求职网站首页首页是所有整体网站的一个起点，在首页可以看到4个衔接分别是：个人宣言、自我展示、我的资料、联系方式。在首页我并没有添加任何特效，主要是为了让整个界面看起来更加的协调、美观、整洁。（如上图2.2）该页面用到的主要代码有：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>尹立志的个人求职网站</title><linkhref="../css.css"rel="stylesheet"type="text/css"><linkhref="../css.css"rel="stylesheet"type="text/css"><styletype="text/css"><!--body{background-color:#000000;}--></style><linkhref="css.css"rel="stylesheet"type="text/css"></head><bodyleftmargin="0"topmargin="0"marginwidth="0"marginheight="0"><divalign="center"><p> </p><p><imgsrc="images/home.jpg"width="107"height="466"border="0"usemap="#Map"><mapname="Map"><areashape="rect"coords="7,267,100,296"href="about.htm"><areashape="rect"coords="21,317,81,343"href="xiangce.htm"><areashape="rect"coords="7,357,105,382"href="jianli.htm"><areashape="rect"coords="18,402,85,429"href="lianxi.htm"></map></p></div></body></html>自我展示：图2.3自我展示自我展示主要是提供给工作提供方（公司方）展示我富有朝气的面貌，使得后期我在面试过程中更加的具有竞争力，在这个页面我制作了一个动感的相册集的页面，使得整个的界面更加的成熟并具有魅力。（如图2.3）1．此页面用到的主要代码有：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metahttp-equiv="imagetoolbar"content="no"><styletype="text/css">html{overflow:hidden;}body{margin:0px;padding:0px;background:#000;position:absolute;width:100%;height:100%;ursor:crosshair;}#box{position:absolute;background:#111;border:graysolid1px;visibility:hidden;}#screen{position:absolute;left:0px;width:100%;top:10%;height:80%;background:#000;border:graysolid1px;}#boximg{position:absolute;border:graysolid1px;cursor:pointer;}#boxspan{position:absolute;color:#ccc;font-family:verdana;font-size:12px;width:200px;}#boxa{text-decoration:none;color:#ff8000;}#boxa:hover {text-decoration:none;background:#ff8000;color:#ffffff;}#boxa:visited{text-decoration:none;color:#ff8000;}#boxa:visited:hover{text-decoration:none;background:#ff8000;color:#ffffff;}#lnk{visibility:hidden;}</style><scripttype="text/javascript">document.onselectstart=newFunction("returnfalse");O=newArray();box=0;img=0;txt=0;tit=0;W=0;H=0;nI=0;sel=0;si=0;ZOOM=0;rImg=0;//////////////////speed=.06;//animationspeeddelay=.5;//1=nodelay//////////////////functiondText(){txt.style.textAlign=tit.style.textAlign=(sel<nI/2)?"left":"right";txt.innerHTML=O[sel].tx;tit.innerHTML=O[sel].ti;}functionCObj(n,s,x,tx,ti){this.n=n;this.dim=s;this.tx=tx;this.ti=ti;this.is=img[n];this.vz=0;this.sx=0;this.x0=x;this.x1=0;this.zo=0;this.over=function(){with(this){if(n!=sel){O[sel].dim=100;O[n].dim=ZOOM*100;sel=n;l=0;for(k=0;k<nI;k++){O[k].x0=l;l+=O[k].dim;}txt.innerHTML=tit.innerHTML="";setTimeout("dText()",32);}}}this.anim=function(){with(this){vz=speed*(vz+(x1-sx)*delay);x1-=vz;sx=(n==0)?0:O[n-1].x0+O[n-1].dim;zo-=(zo-dim)*speed;l=(x1*si)+6*(n+1);w=zo*si;is.style.left=Math.round(l)+'px';is.style.top=Math.round((H-w*rImg)*.5)+'px';is.style.width=Math.round(w)+'px';is.style.height=Math.round(w*rImg)+'px';if(sel==n){if(sel<nI*.5){tit.style.left=txt.style.left=Math.round(l+w+6)+'px';}else{tit.style.left=txt.style.left=Math.round(l-(nx*.25)-6)+'px';}txt.style.top=Math.round(-(w*rImg)*.25)+'px';tit.style.top=Math.round((w*rImg)*.33)+'px';}}}}functionrun(){for(jinO)O[j].anim();setTimeout("run()",16);}functiondoResize(){tit.style.width=Math.round(nx*.25)+'px';txt.style.width=Math.round(nx*.25)+'px';tit.style.fontSize=(nx/30)+'px';txt.style.fontSize=(nx/70)+'px';with(box.style){width=Math.round(W)+'px';height=Math.round(H)+'px';left=Math.round(nx/2-W/2)+'px';top=Math.round(ny/2-H/2)+'px';}}functionresize(){nx=scr.offsetWidth;ny=scr.offsetHeight;W=nx*90/100;si=(W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));H=(100*si*rImg)+14;doResize();}onresize=resize;onload=function(){scr=document.getElementById("screen");box=document.getElementById("box");tit=document.getElementById("tit");txt=document.getElementById("txt");img=box.getElementsByTagName("img");Lnk=document.getElementById("lnk").getElementsByTagName("a");nI=img.length;ZOOM=nI;rImg=img[0].height/img[0].width;resize();s=ZOOM*100;x=0;tit.innerHTML=img[0].title;txt.innerHTML=img[0].alt;for(i=0;i<nI;i++){vart=img[i].alt;if(Lnk[i].href!="")t+='<br><ahref="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>';O[i]=newCObj(i,s,x,t,img[i].title);img[i].alt="";img[i].title="";img[i].onmousedown=newFunction("returnfalse;");img[i].onmouseover=newFunction('O['+i+'].over();');if(Lnk[i].href!=""){/*====hyperlink====*/img[i].onclick=newFunction('window.open("'+Lnk[i].href+'","_blank");');}x+=s;s=100;}box.style.visibility="visible";run();}</script></head><body><divid="screen"><divid="box"><imgsrc="images/01.jpg"title="explain"alt="Theyexplainedalittleaboutwhattheyweredoing."><imgsrc="images/02.jpg"title="strain"alt="IhopedIwouldn′tcrackunderthestrain."><imgsrc="images/03.jpg"title="retain"alt="Clearlytheywerereadytodoalmostanythingtoretaintheirposition."><imgsrc="images/01.jpg"title="mundane"alt="Iobservedthefaceofpoweratitsmostmundane."><imgsrc="images/02.jpg"title="inhumane"alt="Buttheycouldn′thidetheveryworstoftheirinhumaneundertakingsfromthepeople."><imgsrc="images/03.jpg"title="disdain"alt="Theyshowedtheirutter,completedisdainforjustice."><imgsrc="images/01.jpg"title="neveragain"alt="Nevermore.Neveragain."><spanid="txt"></span><spanid="tit"></span><spanid="lnk"><ahref=""></a><a></a><a></a><a></a><a></a><a></a><a></a></span></div></div><!—crossbrowserimages_loading_bar-GerardFerrandez–-Feb2005--><spanid="LB0"style="position:absolute;left:50%;top:50%;"><spanstyle="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading...</span><spanstyle="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><spanid="LB1"style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span><script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;functionimages_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128);elsesetTimeout("images_loading_bar()",64);};images_loading_bar();</script><!--endofimages_loading_barcode--></body></html></table><divalign="center"><spanclass="style1"><ahref="home.htm">返回</a></span></div><divalign="center">2004-2005COPYRIGHT ASHTRAY.ONFEELING.COM  <br></div><palign="left"></p><palign="left"> </p></body></html>个人宣言页面：图2.4我的个人宣言个人宣言是我对工作的一种努力认真的态度，一封我写给招聘者的信，在此页面我运用了滚动字幕特效，在滚动字幕上可以任意写入各种你想说的话语，使整个页面显得更具互动性。（如图2.4）1．滚动字幕特效代码如下：<marqueestyle="color:#414141;font-size:12px;line-height:17px;"direction="up"height="90"scrollamount="1"scrolldelay="100"onMouseOver="this.scrollDelay=500"onMouseOut="this.scrollDelay=1"width="100"><spanclass="STYLE24"><spanclass="STYLE25">欢迎光临尹立志的个人求职网站，这里是我的个人宣言界面，要联系我请通过联系方式界面与我取的联系。</span></td></span></marquee>2．该页面用到的主要代码有：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>尹立志个人求职网站</title><linkhref="css.css"rel="stylesheet"type="text/css"><styletype="text/css"><!--body{background-color:#000000;}--></style><linkhref="css.css"rel="stylesheet"type="text/css"><styletype="text/css"><!--.style1{ color:#FF9900;font-weight:bold;}.STYLE20{font-size:large}.STYLE22{color:#FF9900;font-weight:bold;font-size:16px;}--></style></head><bodyleftmargin="0"topmargin="0"marginwidth="0"marginheight="0"><imgsrc="images/photo.jpg"width="251"height="242"><tablewidth="72%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdheight="500"><tablewidth="549"height="471"border="1"><tr><tdheight="389"><pclass="STYLE22">尊敬的领导:</p><pclass="STYLE22"><br>       您好!<br>       我叫尹立志，20岁，性格活泼，开朗自信，是一个不轻易服输的人。三年的大学深造使我树立了正确的人生观，价值观，形成了热情，上进，不屈不挠的性格和诚实，守信，有责任心，有爱心的人生信条，扎实的人生信条，扎实的基础知识给我的“轻叩柴扉”留下了一个自信而又响亮的声音。<br>诚实做人，忠实做事是我的人生准则，“天道酬勤”是我的信念，“自强不息”是我的追求。复合型知识结构使我能胜任社会上的多种工作。我不求流光溢彩，但求在合适的位置上发挥的淋漓尽致，我不期望有丰富的物质待遇，只希望用我的智慧，热忱和努力来实现我的社会价值和人生价值。<br>您一刻的斟酌，我一生的选择！诚祝贵单位各项事业蒸蒸日上！</p></td></tr></table><pclass="STYLE20"> </p><pclass="STYLE22"> </p></td></tr></table><palign="center"><spanclass="style1"><ahref="home.htm">返回</a></span></p><palign="left"> </p></body></html>我的资料/求职简历：图2.5我的资料/求职简历我的资料是给工作提供方（公司方）查阅我的资料，详细的了解我所获得的奖项，学习成绩，所参加的培训，让工作提供方（公司方）在一定程度上了解我，在这个页面我使用了一个时钟表的特效。（见上图2.5）1．时钟表特效代码如下：<bodyonload=startclock()><formname="clock"><scriptlanguage="JavaScript">vartimerID=null;vartimerRunning=false;functionstopclock(){if(timerRunning)clearTimeout(timerID);timerRunning=false;}functionstartclock(){stopclock();showtime();}functionshowtime(){varnow=newDate();varhours=now.getHours();varminutes=now.getMinutes();varseconds=now.getSeconds()vartimeValue=now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日"+((hours>=12)?"下午":"上午")timeValue+=((hours>12)?hours-12:hours)timeValue+=((minutes<10)?":0":":")+minutestimeValue+=((seconds<10)?":0":":")+secondsdocument.clock.thetime.value=timeValue;timerID=setTimeout("showtime()",1000);timerRunning=true;}</script><inputname="thetime"style="font-size:9pt;color:#000000;border:1pxsolid#FFFFFF;;"size="28"></form>2．此页面主要代码如下：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>我的简历</title><linkhref="css.css"rel="stylesheet"type="text/css"><styletype="text/css"><!--body{background-color:#000000;color:#FFFFFF;}--></style><styletype="text/css"><!--.style1{color:#FF9900;font-weight:bold;}.style2{color:#FF9900}.STYLE12{font-size:18px}.STYLE13{color:#FF9900;font-weight:bold;font-size:18px;}--></style></head><bodyleftmargin="0"topmargin="0"marginwidth="0"marginheight="0"><spanclass="STYLE12"></span><tablewidth="75%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdclass="STYLE12"><palign="justify"class="style1">求职简历</p><tablewidth="575"height="919"border="1"><tr><tdcolspan="4"><spanclass="style2">个人资料</span></td></tr><tr><tdwidth="93">姓名：</td><tdwidth="93">尹立志</td><tdwidth="93">民族：</td><tdwidth="93">汉族</td></tr><tr><td>性别：</td><td>男</td><td>身高：</td><td>175cm</td></tr><tr><td>年龄：</td><td>20</td><td>毕业学校：</td><td>重庆科创职业学院（原重庆信息工程学院）</td></tr><tr><td>学历：</td><td>专科</td><td>专业名称：</td><td>计算机信息管理</td></tr><tr><tdcolspan="4"></tr></table><divalign="left"class="STYLE12"></div><palign="center"class="STYLE13"><ahref="home.htm">返回</a></p><palign="left"class="STYLE12"> </p></body></html>联系方式图2.7联系方式联系方式是为让工作提供方（公司方）对我的求职有意向的时候联系我，在此页面我添加了一个背景烟花的特效，使页面显得不是那么的枯燥。1．背景烟花特效的代码如下：<bodybgColor="#000000"><LAYERclip="0,0,1,1"bgcolor="#ffffff"visibility="show"top="10"left="10"name="a0"></LAYER><LAYERclip="0,0,1,1"bgcolor="#fff000"visibility="show"top="10"left="10"name="a1"></LAYER><LAYERclip="0,0,1,1"bgcolor="#ffa000"visibility="show"top="10"left="10"name="a2"></LAYER><LAYERclip="0,0,1,1"bgcolor="#ff00ff"visibility="show"top="10"left="10"name="a3"></LAYER><LAYERclip="0,0,1,1"bgcolor="#00ff00"visibility="show"top="10"left="10"name="a4"></LAYER><LAYERclip="0,0,1,1"bgcolor="#ff00ff"visibility="show"top="10"left="10"name="a5"></LAYER><LAYERclip="0,0,1,1"bgcolor="#ff0000"visibility="show"top="10"left="10"name="a6"></LAYER><LAYERclip="0,0,1,1"bgcolor="#ffffff"visibility="show"top="10"left="10"name="a7"></LAYER><LAYERclip="0,0,1,1"bgcolor="#fff000"visibility="show"top="10"left="10"name="a8"></LAYER><LAYERclip="0,0,1,1"bgcolor="#ffa000"visibility="show"top="10"left="10"name="a9"></LAYER><LAYERclip="0,0,1,1"bgcolor="#ff00ff"visibility="show"top="10"left="10"name="a10"></LAYER><LAYERclip="0,0,2,2"bgcolor="#00ff00"visibility="show"top="10"left="10"name="a11"></LAYER><LAYERclip="0,0,2,2"bgcolor="#0000ff"visibility="show"top="10"left="10"name="a12"></LAYER><LAYERclip="0,0,2,2"bgcolor="#ff0000"visibility="show"top="10"left="10"name="a13"></LAYER><divid="starsDiv"style="LEFT:0px;POSITION:absolute;TOP:0px"><divstyle="BACKGROUND:#ffffff;FONT-SIZE:2px;HEIGHT:2px;POSITION:relative;WIDTH:2px"></div><divstyle="BACKGROUND:#fff000;FONT-SIZE:1px;HEIGHT:1px;POSITION:relative;WIDTH:1px"></div><divstyle="BACKGROUND:#ffa000;FONT-SIZE:1px;HEIGHT:1px;POSITION:relative;WIDTH:1px"></div><divstyle="BACKGROUND:#ff00ff;FONT-SIZE:1px;HEIGHT:1px;POSITION:relative;WIDTH:1px"></div><divstyle="BACKGROUND:#00ff00;FONT-SIZE:1px;HEIGHT:1px;POSITION:relative;WIDTH:1px"></div><divstyle="BACKGROUND:#0000ff;FONT-SIZE:1px;HEIGHT:1px;POSITION:relative;WIDTH:1px"></div><divstyle="BACKGROUND:#ff0000;FONT-SIZE:1px;HEIGHT:1px;POSITION:relative;WIDTH:1px"></div><divstyle="BACKGROUND:#ffffff;FONT-SIZE:1px;HEIGHT:1px;POSITION:relative;WIDTH:1px"></div><divstyle="BACKGROUND:#fff000;FONT-SIZE:1px;HEIGHT