毕业论文网站的可视化建设与设计

论文（设计）题目：网站的可视化建设与设计目录TOC\o"1-3"\h\u24200摘要 116622ABSTRACT 228798第1章绪论 3246891.1网页设计中视觉信息传达有效性 3194211.2当前企业网站设计中存在的问题 4292481.2.1企业网站的规划 4137851.2.2企业网站的定位 4134921.2.3企业网站的设计 5208291.2.4企业网站的推广 533671.3合理进行企业网站设计 5194951.4网站可视化设计 6253第2章相关技术与软件 8292212.1Dreamweaver相关知识 8332.1.1Dreamweaver简介 8165142.1.2Dreamweaver的应用领域 8215862.1.3Dreamweaver的优势 877372.2Div+CSS布局特点 9255862.2.1代码优化 10200132.2.2网页访问速度 10113192.2.3SEO优化 1038642.2.4浏览器兼容性 10138012.2.5CSS+Div网页布局常犯的错误 1016330第3章网站需求分析 1284713.1分析目标用户 12211393.2网站的功能简介 1218943.3网站制作目的 1328877第4章网站建设 14127744.1网站页面分析 14306864.2网站建设要点 15180734.3制作核心代码 168164.4交互页面设计 1729445第5章网站测试 214840参考文献 231164致谢 24PAGE\*Arabic24摘要网页设计作为用户界面交互设计的延伸，是在新的媒体和新的技术支持实现一个全新的设计创作领域。设计创作网页与循环其特有的特点和结构思路，具备可实际性和外观时尚。图像的设计与制作在网站中是一个具体问题，也是必不可少的一部分。因为图像设计的构思、制作是反映一个网站的风格与主题，也是吸引访问者的一种手段。本论文将对网站设计的开发语言开展研究和谈论。在网页设计与制作语言的基础上，着重使用Html作为工具语言进行网站制作的实际操作，分别对基于对象的Html、CSS进行详细描述并实现网页的开发，从而建立一个静态网站。关键词：可视化；Dreamweaver；Photoshop；CSS

ABSTRACTWebdesignasanextensionoftheuserinterfaceinteractiondesign,isinthenewmediaandnewtechnicalsupporttorealizeanewfieldofdesign.DesigntocreatepageswithitsuniquecharacteristiCSandcyclestructure,withpracticalandfashionappearance.Thedesignandmanufactureoftheimageonthesiteisaspecificproblem,isalsoanessentialpartof.Becauseimagedesignconception,productionisreflectthestyleandthemeofaWebsite,isalsoameanstoattractvisitors.ThispaperwillbetodevelopWebdesignlanguageresearchandtalkabout.InWebdesignandproductiononthebasisoflanguage,focusesonusingHtmllanguageasatooltocarryonthesiteoftheactualoperating,respectivelybasedontheobjectofHtml,CSS,adetaileddescriptionandrealizationofWebdevelopment,soastobuildastaticWebsite.Keywords:Visualization;Dreamweaver;Photoshop;CSS第1章绪论网站设计是基于企业的网络推广，所以在设计中应该从企业的整体方面着手，企业CI涵盖了企业的形象理念、行为理念和视觉管理理念，即MI、BI、VI等。网站设计中通过图标、文字、动画、影像以及音效等设计元素把企业形象多方位地展示出来，让大众通过视觉、听觉以及其他感觉获取企业信息，提高企业的知名度和信赖度[1]。但不无遗憾的是，尽管企业搭建网站在近几年如雨后春笋般遍地开花，可是由于企业对网络展示的优势认识尚还不足，国内企业仍较少关注网络形象的多样性和实时性特征，众多企业对网站中CI理念的贯彻没有革新认识，在推广企业网络形象时，仍保守地停留在仅靠图案与符号保持传统CI的一致性，并未能全面考虑到网络展示平台的多维度特征，且对网络实时性与受众的影响之间的关系未引起重视，从而出现了一些网站页面长期不变，企业图标单一、缺乏变化，不考虑受众审美疲劳等因素，出现没有很好搭建与受众沟通平台的现象[2]。1.1网页设计中视觉信息传达有效性网页设计在遵循基本的设计原则和方法的前提下,要做到网页主题定位明确、鲜明突出，网站内的全部信息在进行完整表达时，必须根据主题进行选择、鉴别和整理[3]。只有全面考虑网页的视觉信息效果，才能吸引对本站点有需求的人的视线，网页结构清晰、层次简洁，使用户明确自己身在何方，网页整体形象统一、风格一致，并通过页面的构图、文字、色彩、图像的运用来实现。使网站整体形象统一，风格一致，网页也是遵循着统一的设计规范完成，加强用户对网站的印象。设计目的明确、形式鲜明，不同内容的网页要用不同的形式来表现。另外，优秀的网站必须与使用者有良好的互动性，它需要一些设计上的技巧与软硬件的支持，提高浏览者接受信息的主动性和参与信息反馈的积极性，加上个人技巧、经验累积，成功有效地传达信息。信息即时、更新及时，避免滥用技术。在保持页面统一性和连续性的前提下，资料一定要注意即时性，经常更新内容,变换新的表现形式，使更新成为互联网永恒不变的主题。技术尽量不要用得太过多样，注意软硬件技术的配合和运用，与本身网站的性质及内容相配合[4]。随着网页商业化的普及，要巧妙处理效果与速度的矛盾关系，在明确用户要求和期待基础上,在允许的范围内把图像压缩到最小的程度，制作出具有等待价值的网页，速度是网页设计中美学的基本要素，但是强调速度的同时,要正确处理它们之间的矛盾关系；要提高网页中的人文优化，网页的优化工作是由很多方面组成的，信息设计是网页设计的重点，要精心进行构思，让用户都能够理解网站,方便快捷的使用网站,设计全过程都要围绕主题进行展开；综合高效地运用多媒体技术，通过多种技术和设计手段来满足和丰富浏览者提出的更高的要求，不断地创新，以提高网页交互设计的有效性，使产品有效使用并使人愉悦[5]。在交互式设计中应注意：使用者对工具的控制能力，交互行为的统一性，前后关系的呼应，应考虑增加人机交互是否能使概念清晰,增强了导航和交互性的效果，使用户更好的参与网站信息传递的全过程。另外，随着网络环境和软件环境飞速发展，还要增加体验设计互动性，提高用户的参与性，使得用户体验变得立体化和全方位，可以发挥个性和想象力的空间，更能够充分调动人的参与性，从而更好地实现网页设计中网络文化的传播。1.2当前企业网站设计中存在的问题近年来，企业都在网络营销中投入了一定的人力财力，大部分企业在市场上找一些做网站的公司或者自己企业内部非专业人士做出个简单的网站页面，结果都是收效甚微，导致企业慢慢对网络营销失去了信心。最主要的问题就是网站设计没有结合企业营销理念，而是简简单单的网页内容的堆砌[6]。1.2.1企业网站的规划网站作为企业网络营销的一个重要手段，规划是一个很重要的步骤。大部分企业没有规划策略，或者与企业的营销策略脱节，仅仅实现了一个网页内容的堆砌。1.2.2企业网站的定位很多企业不知道自己要在网站上表现什么内容，往往是由网站制作的公司进行资料的筛选，而网站制作的公司在对于企业的营销和市场策划几乎一无所知的情况只能按标准化格式来运作，不能体现企业的个性化内容和服务内容。定位几乎都是产品展示，基本很少包含客户引导性信息，互动形式单一，网站更新速度缓慢，网站浏览者不能通过网站了解企业的丰富信息[7]。1.2.3企业网站的设计企业网站大部分采用通用模板设计制作，色调大众化，颜色搭配简单但不一定适合企业的风格，企业网站为了宣传企业形象，大众化的采用Flash动画，而专业设计人员的花费很高，企业往往进行简单的模仿抄袭式的动画设计，与企业形象相差很远。而且网站首页的这种动画设计在实用性上来讲不是很合理。1.2.4企业网站的推广企业网站基本不做什么推广，号称做了推广的，也不外乎是在几个大的门户网站花不少钱做了广告，或者是搜索引擎的关键字推广服务。花钱不少，收效甚微。1.3合理进行企业网站设计企业网站的设计要从网站浏览者角度出发，结合企业营销方案，进行合理化设计。1.企业网站要有一个明确的定位，是针对最终用户，还是针对企业的代理商，还是针对内部的员工、企业管理的页面。针对的对象不同，就要有不同的网站布局和规划。比如，针对最终客户，要给的是产品的详细的介绍，公司产品相应文化的对应介绍，以及更多的产品的促销的信息，企业与客户之间的互动交流的及时性和简便性；针对代理商的页面，就要强调公司产品的长期可经营性，系列产品的优势，品牌的价值，以及合作伙伴的详细分类介绍及各级别享受产品折扣情况；针对于企业内部管理的页面就要简洁明了，易用，而且路径要相对隐蔽[8]。现在的情况是，企业的网站往往不知道自己的网站的首页面应该搁放什么样的内容，自己网站的合理架构应该是个什么样子，只是由于“引领式的消费”，随波逐流放上了自己的企业网站。缺乏对企业电子商务的规划和认识，缺乏对企业网络营销重要性的认识。所以，对于企业网站来讲，只能是一步一步的按企业需求和市场需求的阶段来实施企业电子商务的市场化。对于国内中小型企业来讲，电子商务或者更为简单一些的网络营销是企业发展的一个重要的筹码，可以简单有效的实现自己产品的全国销售及全球销售，但不可急于求成，急功近利，应该有目标有计划的实施企业的电子商务营销的项目。从简单的企业产品的介绍，企业品牌的推广的简单的推广型的企业站点，发展成为与客户互动交流的企业自己的B2C的电子商务的平台，这是与时俱进的，不是一蹴而就的。2.有了好的规划，还要有专业的技术人员来实施细节的技术问题，而这一点尤为重要。就好像一个熟读兵书战册的人，却没有带兵打过仗一样，好的钻石更重要的在于它的切工。企业首页的动画设计，对于企业的品牌推广和形象推广是很有必要和作用的，所以，在企业进行品牌宣传和形象推广的时期内，在网站的首页实现动画的效果是一个不错的选择；假如企业目前的重点不是进行形象推广，而是产品推广和渠道推广，那么企业网站的首页动画设计便会造成一些访问缓慢，且达不到效果的后果，就像再好的药也要对症才能体现出它的价值所在是一样的。所以，手段是一样的手段，只不过大家排列组合的方式不同，就显示了不同的功力而已。企业网站颜色的选择，也要根据企业产品特点，企业文化特色，选择不同的色调来体现。这不仅需要专业的眼光，更需要专业的人员进行调色的工作。在当前国内企业网站的发展来看，更多的是选择传统的广告公司进行专业的企业推广宣传的设计工作，那么企业网站仍然要跟企业主题推广相结合且相互促进。3.企业网站的推广不是花越多钱越好，更不是花越少钱越妙。推广工作本身就是一个合理利用现行的各种推广方式，针对于企业的当前发展规划，进行各种宣传方式合理搭配的技巧性的设计，推广工作本身看的就是投入合理的资金达到推广的最大化效果。而这些，并不是一个简单的投入产出比能够解释清楚的事。4.企业网站的管理要根据企业的发展状况，及时的调整网站的内容，推出一定时间内的企业推广推广主题，内容保持更新。不能够千年不变，要根据客户的认可程度等可分析项，逐步完善整个网站的内容框架和服务框架。1.4网站可视化设计可视化（Visualization）是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，并进行交互处理的理论、方法和技术,它涉及到计算机图形学、图像处理、计算机视觉、计算机辅助设计等多个领域，成为研究数据表示、数据处理、决策分析等一系列问题的综合技术[9]。可视化技术最早运用于计算科学中，并形成了可视化技术的一个重要分支——科学计算可视化(VisualizationinScientificComputing)。科学计算可视化能够把科学数据，包括测量获得的数值、图像或是计算中涉及、产生的数字信息变为直观的、以图形图像信息表示的、随时间和空间变化的物理现象或物理量呈现在研究者面前，使他们能够观察、模拟和计算[10]。对于产品的可视化设计，主要旨在借助于图形化等直观手段，清晰有效地传达与沟通信息，形成高效的功能、使用映射，完成用户任务目标。为用户想完成的任务选择正确的界面元素，通过一种能迅速理解和易于使用的表达方式，展现在页面上，降低用户的认知负担和物理负担。大概分为四个层次：功能可视化、结构可视化、操作可视化、控件可视化[11]。总之，围绕着“快、明确、高效”的信息传递定位，揭其根本从功能模块、任务流程、界面控件元素、信息承载等方面去提升体验的有效性和合理性，设计中根据目标受众的需求、行为，合理运用可视化方式，使产品更易用，提高用户体验。

第2章相关技术与软件2.1Dreamweaver相关知识2.1.1Dreamweaver简介Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页[12]。DreamweaverCS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作!CS6新版本使用了自适应网格版面创建页面，在发布前使用多屏幕预览审阅设计,可大大提高工作效率。改善的Ftp性能，更高效地传输大型文件。“实时视图”和“多屏幕预览”面板可呈现Html5代码，更能够检查自己的工作[13]。2.1.2Dreamweaver的应用领域Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。2.1.3Dreamweaver的优势1.最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks、Freehand或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单、快捷键与格式控制都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如PlaybackFlash、Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Fireworks或Photoshop来进行编辑与设定图档的最佳化。2.网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有连结。使用支援文字、Html码、Html属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。3.无可比拟的控制能力Dreamweaver是唯一提供Roundtrip

Html、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，Cold

Fusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML

Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading

style

sheets的动态Html支援和鼠标换图效果，声音和动画的DHtml效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告[14]。2.2Div+CSS布局特点2.2.1代码优化网站使用Div+CSS布局使代码很是精简，相信大多朋友也都略有所闻，CSS文件可以在网站的任意一个页面进行调用，而若是使用Table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用Div+CSS布局只需修改CSS文件中的一个代码即可。2.2.2网页访问速度使用了Div+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。2.2.3SEO优化采用Div+CSS布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取[15]。2.2.4浏览器兼容性Div+CSS相比Table布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对Web标准默认值不同。国内主流是IE，Firefox及Chrome用的较少，在兼容性测试方面，首先需要保证在IE多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体问题在网站查找解决办法。2.2.5CSS+Div网页布局常犯的错误1.检查Html元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错Div的嵌套关系。可以用Dreamweaver的验证功能检查一下有无错误。2.检查CSS是否书写正确检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。3.用删除法确定错误发生的位置如果错误影响了整体布局，则可以逐个删除Div块，直到删除某个Div块后显示恢复正常，即可确定错误发生的位置。4.利用border属性确定出错元素的布局特性使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。5.float元素的父元素不能指定clear属性MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。6.float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。7.float元素不能指定margin和padding等属性IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个Div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。8.float元素的宽度之和要小于100%如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。9.是否重设了默认的样式?某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。10.是否忘记了写DTD?如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。第3章网站需求分析所谓网站的需求分析就是从用户的角度出发，来完善用户的需求。一个网站的成功与否很大程度上取决于网站的组织系统与浏览者的意向统一。只有把握住这一点，才能更好的设计网站，才可以吸引用户，从而留住用户。所以我们要在可行性研究的基础上，确定新网站要完成哪些功能，也就是对网站最终目标提出更完整、清晰、具体和准确的要求。3.1分析目标用户当要制作一个网站，首先肯定要先分析这个网站所服务的目标用户群，他们需要哪些相关服务，他们会喜欢什么风格的网站类型，什么样的色彩搭配能让他们看着更舒服，什么样的网站布局能方便他们浏览网站这些过程都是需要作为网站负责人不断的分享与更新，不断去修改，它伴随这个网站成长的整个过程。要随时关注网站目标用户的需求，然后针对需求分析对网站进行相应的调整，这是获得好的用户体验最基本的一步,也是建网站的很重要的一步。3.2网站的功能简介确定好用户类型之后，接下来就是研究用户所关注的内容了。怎样确定用户关注哪些内容呢，除了向企业的销售人员调研，也可以做一个简单的“角色互换”思考，如果你是用户，那么你会从哪些方面来考察企业呢？如果你是用户，你会希望看到怎样的网站？开发这个网站是为了让访问者能够全方位的了解这个企业和企业推广的产品等诸多信息，也为用户提供了一个好的平台，让浏览者更加便于了解产品的概况和更新情况。根据网站的的分类，我们分了七个栏目进行详细制作。1.首页：首页在一个网站中式很重要，是一个企业的门面和形象的象征。首页做的好才能吸引更多的浏览者。在这里我们的首页首先用一个大的banner来吸引读者，又分别介绍了欧朋产品的一些最新信息。2.产品：主要用来介绍最新的产品，为了让用户更加清楚地理解这个产品的功能，我们分别介绍了它的优点和特性。3.下载：主要为用户提供了下载的平台，不同的版本用来满足不同的用户需求。4.公司：主要是用来了一些公司的简介，对于公司起到一个宣传的作用。对于企业性网站来说这是一个很好的推广方法。5.论坛：为使用者提供一个交流平台，同时也可以看到大家都产品的意见和建议，从而得到改进。6.帮助：主要就是帮助用户解决问题。7.开发者：主要用来介绍网站的开发环境。3.3网站制作目的本网站的主要任务是制作一个企业性网站，企业性网站所要达到的主要目的有：1.宣传企业，创造销售机会据调查，有超过30%的人是通过上网查询企业的电话和地址的，这一比例和通过114查询的比例相接近，可见企业网站已成为许多人首次接触企业、了解相关信息的选择。2.加强客户沟通宣传企业产品企业可以通过网站建立与客户沟通的便捷渠道，全面展示企业的所有产品。网络科技足以令您的产品与品牌形象更加立体地呈现在用户面前，就算企业仅仅把网站当成电子宣传册来使用，也较传统的宣传模式更加的多姿多彩、更加地易于发布与传播、更加的经济与环保。3.丰富营销手段，扩大产品销售渠道企业网站可以满足一部分客户网上查询与采购的需要，抓住网络商机。企业通过网站可以开展电子营销。首先，电子营销作为传统营销的补充；其次，电子营销可以拓展新的空间，增加销售渠道，接触更大的消费群体，获得更多的新顾客，扩大市场；再次，电子营销可以减少环节，减少人员，节约费用，降低成本，有利于提高营销效率。4.有利于了解顾客的意见，掌握顾客的需求在不干扰顾客正常工作和生活的条件下，企业通过网站上的调查表、留言薄、定制服务以及E-MAIL可以倾听顾客的意见，了解顾客的心声，加强企业与顾客间的联系建立良好的顾客关系。

第4章网站建设4.1网站页面分析商业的版面设计不是无边际的自由设计，需要遵循一定的规划原则。首先需要确定的是网站的主色调。主色调代表着公司的形象和经营理念，所以必须首先确定。其次，构想网站要实现的功能，划定功能区。网站中的每一个页面中都有一个标题，多用来提示该页面的主要内容。标题将出现在浏览器的标题栏中，而不是出现在页面的布局中。它还有一个比较重要的作用就是引导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。如图1所示：图1产品在色彩上，网站整体以蓝色为主色彩，文字方面以灰黑色为主，以白色为辅。在总体板式上，首页为独立板式。二级页面其栏目下的子栏目为统一板式，整个网站的导航分类清楚，对于浏览者来说，节省了很多的时间，也为浏览者提供了方便。在页面的底部也标注了网站的一些信息，中间用淡灰色做背景来标注为主要内容，显示页面的主要信息，也是网站的核心。如图2所示：图2首页4.2网站建设要点网站建设用到的最重要的工具就是Dreamweaver，在制作时要达到以下几点：1.使用方便、功能实现能力强：网站要实现的访问目的无非在于：提高网站知名度，增强网页吸引力；实现从潜在顾客到实际顾客的转化；实现从普通顾客转化成忠诚顾客等。为用户提供人性化的多功能界面，并能为顾客提供方便显得十分重要。2.要有丰富的网站内容：网站就向报纸一样，其内容相当重要，没人愿意会两次看同一份毫无新意的报纸一样。因此，网站的吸引力直接来源于网站的内容，直接影响网站的质量。3.页面打开的速度要快：如果不能保证每个页面下载速度，至少应该保证主页能尽快的打开，因此，让网页简单化相当重要，尽量将最重要的内容放在首页以及避免使用大量的图片。页面下载速度是网站留住访问者的关键因素，一般人的耐心是有限的，如果10-25秒还不能打开一个网页，就很难让人等待了。所以在制作每个页面时，尽量不重复的CSS进行归类处理，减少网页的容量，能够快速打开；网页内容也是丰富多彩的，界面也清晰明了。这样才能使网站达到最好的效果。4.3制作核心代码下面是首页的代码：<Htmlxmlns="/1999/xHtml"> <head> <style> /*导航*/ .bannerBox{background-image:url(images/banner.png);width:100%;background-repeat:no-repeat;background-position:center;} .banner{position:relative;width:940px;height:548px;margin:0auto;} .bannerBtn{position:absolute;top:359px;left:43px;} /*banner广告*/ .zhushi{width:940px;margin:0auto;line-height:61px;font-family:"宋体";} /*banner注释*/ .informationBox{width:940px;margin:0auto;border-bottom:gray1pxsolid;} .information{width:300px;float:left;margin:0px10px;} .informationh1{line-height:26px;text-align:center;font-family:"宋体";} .information dd{display:block;line-height:27px;padding-left:13px;background-image:url(images/ico_dot.png);background-repeat:no-repeat;background-position:1pxcenter;overflow:hidden;} .informationdl{height:112px;padding-top:18px;} .informationdda{float:left;font-family:"宋体";} .informationddspan{float:right;} .nobox{width:960px;overflow:hidden;margin-left:-10px;} /*信息*/ .endBox{width:940px;margin:0auto;padding-bottom:59px;} .end{overflow:hidden;} .endli{float:left;line-height:60px;padding-right:13px;} .endBoxp{line-height:22px;} .endli,.endBoxp{font-family:"宋体";} /*底部*/ </style>4.4交互页面设计交互是整个网站的灵魂所在，精神支持。也是最有情感的地方，在这个页面里，我们可以相互沟通，讨论问题，发表感言，可以说畅所欲言。有人评价论坛是个很好的学习地方，也有人说论坛就是垃圾场。我想说这正是交互的魅力，只有网站上做交互了，我们才可以去评价，去了解。如图3所示：图3论坛次论坛的核心代码如下：<Htmlxmlns="/1999/xHtml"><head><style>.luntanBox{width:940px;margin:0auto;margin-bottom:43px;}.login{width:940px;margin:0auto;overflow:hidden;line-height:25px;}.loginli{float:right;;background-color:#dcdcdc;margin-right:6px;text-align:center;font-size:14px;padding:0px20px;}li.login1{background-color:#43c3ed;margin-right:2px;}li.login1a{color:black;}img.tp{margin:10px0px;}.luntanBox.icon1{padding-left:36px;color:black;background-image:url(images/luntan_icon1_03.png);background-repeat:no-repeat;background-position:14pxcenter;line-height:14px;}.neirong{margin:12px0px;overflow:hidden;}.neironga{color:black;}.xinxi{float:left;}h1.news{float:right;color:black;margin-right:5px;}.neirongBox{border:solid1px#e2e2e2;}.top{height:31px;border-bottom:solid1px#e2e2e2;background-color:#fbfbfb;}.toph1{font-size:14px;line-height:31px;margin-left:10px;}.bottom{padding:13px0px;background-color:white;overflow:hidden;border-bottom:solid1px#e2e2e2;}.bottombk{border-bottom:dotted1px#e2e2e2;}.bottomdl{padding-left:66px;float:left;}dd.zj{line-height:25px;}.bottomh1{font-size:14px;color:black;}dl.bottom1{padding-left:150px;}.dibu{height:40px;border:solid1px#e2e2e2;background-color:#ffffff;margin-top:10px;line-height:40px;padding-left:10px;}.dlbjt{background-image:url(images/lt_1.png);background-repeat:no-repeat;background-position:14px-7px;}.dlbjt1{background-image:url(images/lt_2.png);background-repeat:no-repeat;background-position:100px-7px;}.dlbjt2{background-image:url(images/lt_3.png);background-repeat:no-repeat;background-position:100px-7px;}.dlbjt3{background-image:url(images/lt_4.png);background-repeat:no-repeat;background-position:14px-10px;}.dlbjt4{background-image:url(images/lt_5.png);background-repeat:no-repeat;background-position:100px-7px;}.dlbjt5{background-image:url(images/lt_6.png);background-repeat:no-repeat;background-position:100px-7px;}.dlbjt6{background-image:url(images/lt_7.png);background-repeat:no-repeat;background-position:14px-10px;}.dlbjt7{background-image:url(images/lt_10.png);background-repeat:no-repeat;background-position:14px-7px;}.dlbjt8{background-image:url(images/lt_11.png);background-repeat:no-repeat;background-position:100px-7px;}.dlbjt9{background-image:url(images/lt_9.png);background-repeat:no-repeat;background-position:100px-7px;}.dlbjt10{background-image:url(images/lt_12.png);background-repeat:no-repeat;background-position:14px-7px;}.dlbjt11{background-image:url(images/lt_13.png);background-repeat:no-repeat;background-position:100px-7px;}.dlbjt12{background-image:url(images/lt_16.png);background-repeat:no-repeat;background-position:14px-5px;}.dlbjt13{background-image:url(images/lt_15.png);background-repeat:no-repeat;background-position:100px-5px;}.dlbjt14{background-image:url(images/lt_14.png);background-repeat:no-repeat;background-position:100px-5px;}.dlbjt15{background-image:url(images/lt_17.png);background-repeat:no-repeat;background-position:14px-5px;}.dlbjt16{background-image:url(images/lt_18.png);background-repeat:no-repeat;background-position:100px-5px;}.dlbjt17{background-image:url(images/lt_19.png);background-repeat:no-repeat;background-position:100px-5px;}.dlbjt18{background-image:url(images/lt_20.png);background-repeat:no-repeat;background-position:14px-5px;}.dlbjt19{background-image:url(images/lt_21.png);background-repeat:no-repeat;background-position:100px-5px;}.dlbjt20{background-image:url(images/lt_22.png);background-repeat:no-repeat;background-position:98px-5px;}.dlbjt21{background-image:url(images/lt_23.png);background-repeat:no-repeat;background-position:14px-5px;}</style>第5章网站测试在一切经过网站测试后，每个页面都成功显示，尽管在测试中遇到很多错误但已成功解决，而且系统的每个功能都成功实现。本项目在设计上严格要求,尽量切合实际，在程序设计上界面友好,操作简便,节省了大量的工作量,加强