网站毕业设计论文.docx

1、网站毕业设计论文湖南现代物流职业技术学院毕业设计题 目 洛枫公司网站建设_ 系 部 物流信息系 专 业 电 子 商 务 班 级 电商1002班 姓 名 喻奇 指导教师 欧阳红巍 2012年12月09日摘 要随着计算机、网络与通讯技术的发展，Internet 在人们的生活、学习和工作的位置越来越重要，通过发布属于公司的 Web 站点宣传推广公司产品或开展公关活动已成为一种趋势。电子商务的发展使得企业管理模式和贸易模式发生了很大的改变，企业在发展和壮大自己的同时也非常的注重其自身信息化和商业化程度的提高，企业网站便成为一个企业展示自我和对外贸易的重要平台。企业门户性网站的建设和管理水平，直接影响企

2、业的网络形象，拥有一个设计美观、功能全面的门户性网站，已经成为企业网络化建设的一个重要内容。而Web设计的健康发展依靠web标准的采用，没有web标准就不会有真正的可访问性和连贯的设计。不用web标准，就跟不上时代。在这样的标准时代，人们需要网页更加容易扩展，适合自动数据交换，使其更加规整。而css，则实现了页面内容与样式分离。鉴于web标准，本论文着重对div+css布局与公司网站页面实现进行了分析；同时根据公司网站的需求，采用div+css实现了企业网站网页的设计，具体实现了公司首页、公司简介、公司文化、最新动态、产品展示、虫害知识、招聘信息、服务承诺、联系我们、在线留言功能，系统功能符合

3、公司网站的需求。【关键词】 企业网站 网页设计 网站建设前 言当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。各大门户网，企业网都在WEB2.0的标准上,采用div+css来布局.长沙市洛枫有害生物防治用品有限公司为拓展网络销售市场，实施公司品牌宣传，拟建立一个以公司宣传和产品推广为主要目的的企业网站。针对该公

4、司的需求，本课题设计了一个满足其要求的信息发布类网站。本网站旨在宣传公司形象及其产品推介。本网站主要实现以下几方面功能：企业宣传，发布企业相关信息，展示企业品牌形象，展示企业产品，实现产品推介、在线交流，从而需要对本网站的进行设计和制作。在网站设计过程中主要是采用dreamweaver制作，通过将HTML语言、div+css布局和dreamweaver工具软件整合应用，结合photoshop软件进行网站图片素材处理，从而实现网站的制作和建设。论文详细论述了一个基于公司网站开发的设计过程。在技术上，采用了 Dreamweaver网站开发工具，以 HTML的超大功能结合 JavaScript 的客

5、户端语言，这样的构造有利于对网站系统开发。其中，最主要的就是介绍和展示DIV+CSS在网页中的作用和魅力。本文实现了公司首页、公司简介、公司文化、最新动态、产品展示、虫害知识、招聘信息、服务承诺、联系我们、在线留言功能，系统基本符合公司网站的需求。论文组织如下：首先阐述了该网站建设的研究背景、意义以及网站建设的一般流程及其原则，然后进行网站需求分析，接下来详细介绍网站设计技术：Dreamweaver、Photoshop制作工具、html语言、div+css、JavaScript代码、淘宝客基本知识，其次介绍了网站总体规划以及网站页面的实现。前 言 2第一章 绪论 41.1 网站建设的研究背景

6、41.2 网站建设的一般流程及其原则 5第二章 网站需求分析 82.1 需求分析活动 92.2 用户调查活动 92.3 市场调研 10第三章 网站设计工具 113.1 dreamweaver制作工具 113.2 adobe Photoshop软件工具 123.3 html语言 123.4 div+css 133.5 javascript代码 133.6 淘宝客 15第四章 网站总体规划 174.1 网站首页设计 174.2 网站内容设计 174.3 网站功能设计 184.4 网站结构设计 184.5 网站页面可视化设计 184.6 网站风格 184.7 网站的栏目和版块设计 19第五章 网站页

7、面实现 205.1 网站功能分析 205.2 首页设计 205.3 内页设计 235.4 部分技术实现 32总 结 35致 谢 36参考文献 37第一章 绪论随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越多的职业需要具有计算机应用技能型人才。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网站建设的研究背景和网站建设的一般流程及其原则。1.1 网站建设的研究背景如今，互联网对企业来说已经不再是新鲜的事物了，大多数的企业都已经建立了自己的网站。随着互联网的快速发展，网络已成为人们生活的一部分。电子商务、网络营销已不

8、再只是被炒做的概念，人们对其的认识也越来越深刻。不仅仅是大企业需要网站来开展电子商务，中小企业一样也迫切需要自己的企业网站用以实现宣传和联系客户等许多传统媒介无法完成的目标。搭建网站模型需要各方面的资讯，而如何在网页上正确明晰地表达企业的资讯，使企业达到建站的目的，对建设好企业网站是有非常大的意义的。可以说，有正确的建站思路再配合下文所讲的具有普遍性的建站原理才能创造出真正的企业网站，而不是只在技术上苦苦追求完美，堆砌出华丽却没有实际意义的工艺品。电子商务是一种新兴的、处于发展过程中的现代商务方式，从95年来得到了迅速发展，显现了巨大的现代商业价值。1997年欧洲、美国、新加坡等许多国家政府发

9、表了电子商务发展纲要，其目的是引导全球电子商务的自由竞争和健康发展，大力推动电子商务的实践。本国政府的发展纲要也将在近期出台，促进本国企业适应国际化的发展、参与国际竞争。有理由相信，在21世纪，电子商务将逐渐成为社会生活的主要方式，也将成为数字化社会的基础。 电子商务活动是通过公共计算机通信网络进行商务活动的现代方式，该方式将突破传统商务在时间、地域上的限制，成为方便、快捷、安全可靠的新兴电子化商务活动模式。电子商务使现代商务活动具有安全、可靠、快速、明确和方便的特点，通过国际互联网络人们可随时随地开展电子商务活动。由于电子商务涉及社会、经济、金融、法律以及生活等许多方面，故存在一定的困难和问

10、题。其健康发展一方面要求人们的工作生活方式、思想观念和管理方法都将有根本的变革；另一方面国家宏观控制和管理需要对电子商务进行立法和规范；再者技术安全上必须完善可靠。电子商务的发展将逐步改变人们的生活及工作方式，原来面对面谈判、纸上交流的管理与商务活动方式逐步变成了由计算机远距离操作完成的数字化活动方式。没有了时间、空间和人为条件上的限制，人们的生活和工作将变得方便、灵活和自如。特别在获取信息、传输信息、各种服务活动、付款、送货方式等方面将有根本的变化。任何合法组织和公司甚至个人通过在国际互联网络上建立自己的站点都可成为全球化的信息发布者；信息的获取具有了广泛的内容和选择性；贸易、商务活动中的商

11、品认识、合同谈判、交易都通过国际互联网信息和网络软件完成。企业行政管理将进入电子化办公方式，金融服务中的支票、柜台、保险、投资、企业银行业务和家庭银行业务将搬到网络上进行。数字化电子货币的使用与发展为人们进行跨地域的商务金融活动提供了方便条件。人类将不可避免地习惯与计算机共存，适应电子商务时代的数字化生存。电子商务也完全改变了人们当今的商务方式，由于没有了时间和空间的限制，人们可以在家中处理各种业务。1.2 网站建设的一般流程及其原则 1、网站建设流程一个网站的成功与否与网站制作前的规划有着极为重要的关系。为使网站能够达到预期的目的，满足用户要求，不仅需要在网站建设过程中与用户方进行良好的沟通

12、与交流，更重要的是要遵循网站建设流程，只有这样，才能做到既不浪费时间也能提高效率，又能保证网站的科学性、严谨性。一般将网站设计过程分为以下几个阶段： A、对网站需求的分析 首先要明确网站制作的目的和具体要求是什么，进行网站的功能定位，从而确定网站制作类型。B、根据需求来规划设计 确定网站类型后，在正是建站前需要对网站进行一系列的规划与设计。网站规划主要包括网站的类型选择、主题设计、风格设计、内容设计、版面布局设计以及网站策划书的撰写等。网站规划对网站建设起到计划和指导作用，对网站的内容和维护起到定位作用。这一环节的有无和好坏，不仅直接影响网站的整体效果，而且是网站发布后能否成功运行的主要因素。

13、 C、确认好设计之后进行美工操作、网站制作 经过精心设计的网站规划方案最终要通过网页表现出来，制作网页是将网站规划付诸实施的主要任务。在制作页面前要考虑到网站的风格和功能，要根据所建网站的特点做充分准备，使网站的基本格调符合用户的要求，使网站的功能满足用户的使用需求。2、 网站建设原则A、网站第一原则: 目的性任何一个网站,首先必须具有明确的目的和目标群体。网站是面对客户、供应商、消费者还是全部? 主要目的是为了介绍企业、宣传某种产品还是为了试验电子商务? 如果目的不是唯一的,还应该清楚的列出不同目的的轻重关系。建站包括类型的选择、内容功能的筹备、界面设计等各个方面都受到目的性的直接影响, 因

14、此目的性是一切原则的基础。建站的目的应该是经过成熟考虑的, 包含几大要素:目的应该是明确定义的,而不是笼统地说要做一个平台、 要弄电子商务, 应该清楚主要希望谁来浏览,具体要做到哪些内容, 提供怎样的服务,达到什么样是效果。在当前的资源环境下能够实现的, 而不能脱离了自身的人力、物力、互联网基础以及整个外部环境等因素盲目制定目标, 尤其是对外部环境的考虑通常容易被忽略,结果只能成为美好的一厢情愿。如果目标比较庞大,应该充分考虑各部分的轻重关系和实现的难易度, 想要一步登天的做法通常会导致投入过大且缺少头绪,不如分清主次循序渐进。在充分考虑了目的和目标群体的特点以后, 再来选择建站类型, 并相应

15、的安排适当的信息内容和功能服务。B、网站第二原则: 专业性信息内容应该充分展现企业的专业特性对外介绍企业自身,最主要的目的是向外界介绍企业的业务范围、性质和实力,从而创造更多的商机。在这里包括:应该完整无误的表述企业的业务范围( 产品、服务)及主次关系、应该详细的介绍企业的地址、性质、联系方式、提供企业的年度报表、则有助于浏览者了解企业的经营状况、方针和实力。C、网站第三原则: 实用性网站提供的功能服务应该是切合浏览者实际需求，并且符合企业特点。网站提供的功能服务必须保证质量,包括:每个服务必须有清晰定义的流程,每个步骤需要什么条件、产生什么结果、由谁来操作、如何实现等都应该是清晰无误的，实现

16、功能服务的程序必须是正确的、健壮的、能够及时响应的、能够应付预想的、同时请求服务数峰值的。需要人工操作的功能服务应该设有常备人员和相应责权制度。用户操作的每一个步骤完成后，应该被提示当前处于什么状态。当功能较多的时候应该清楚的定义相互之间的轻重关系,并在界面上和服务响应上加以体现。D 、网站第四原则: 层次性条理清晰的结构,表现为网站的板块划分的合理性,这里需要注意:板块的划分应该有充分的依据并且是容易理解的。不同板块的内容尽量做到没有交叉重复内容,共性较多的内容应尽量划分到同一板块。在最表层尽量减少划分的板块数量, 通常控制在 4 6 之间比较合适。划分后的结构层次不宜过深, 通常不超5层为

17、佳。在安排层次的时候要充分考虑用户操作, 比较常用的信息内容、功能服务应该尽量放到更浅的层次以减少用户点击次数。信息内容的获取和功能服务的过程都应该尽量将所需要进行的步骤控制在 3 5 步以内,不得不需要更多的步骤的时候应该有明确的提示。E、 网站第五原则: 艺术性网页创作本身已经成了一种独特的艺术,要达到吸引眼球的目的,再结合界面设计的相关原理,形成了一种独特的艺术,这使得企业网站的设计应该满足:遵循基本的图形设计原则,符合基本美学原理和排版原则。对于主题和次要对象的处理符合排版原理。全站的设计作为一个整体, 应该具有整体的一致性。整体视觉效果特点鲜明:页面版式结构;用色;线条和构图; 配图

18、的精细、观程度; 元素风格;整体气氛表达;字体选用。整体风格同企业形象相符合, 适于目标对象的特点。第二章 网站需求分析网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的基础设施和信息平台。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站则是反映企业形象和文化的重要窗口。一个网站项目的确立是建立在各种各样的需求之上的。这种需求往往来自于客户的实际需求。由于网站需要面对不同层次的用户,因此网站项目的负责人对用户需求的理解,在很大程度上决定了此类网站开发项目的成败。如何更好地了解、分析、明确用户需求,并且能够准确、清晰地以文档的形式表达给参与项目开发的每个成员,保证开发

19、过程按照用户需求进行,是每个网站开发项目管理者需要面对的问题。需求分析工作是网站建设中重要的一步,也是决定性的一步。只有通过需求分析,才能把网站功能的总体概念描述为具体的网站功能描述书,从而奠定网站开发的基础。需求分析的目的是完整、准确地描述用户的需求,跟踪用户需求的变化,将用户的需求准确地反映到系统的分析和设计中,并使系统的分析、 设计与用户的需求保持一致。长沙市洛枫有害生物防治用品有限公司是一家专业从事白蚁、蟑螂、老鼠、蚊蝇、蚂蚁、跳蚤、臭虫、蜱等病媒生物防治及产品销售的专业公司。该公司本着 “以人为本、诚信服务、口碑相传、永续经营”的服务原则，推崇“诚信、高效、安全、环保”的控虫理念，以

20、改善和保护人们的生活环境、自然环境为目的。该公司为拓展网络销售市场，实施公司品牌宣传，拟建立一个以公司宣传和产品推广为主要目的的企业网站。针对该公司的需求，本课题设计了一个满足其要求的信息发布类网站。本网站旨在宣传公司形象及其产品推介。本网站主要实现以下几方面功能：企业宣传，发布企业相关信息，展示企业品牌形象，展示企业产品，实现产品推介、在线交流。与此同时借助了淘宝客的使用，点击产品展示中的图片，就可以链接到淘宝旗舰店，从而可以进行产品的购买。在网站设计过程中主要是采用dreamweaver制作，通过将HTML语言、div+css布局、JavaScript代码，结合Photoshop软件进行网

21、站图片素材处理，从而实现网站的制作和建设。2.1 需求分析活动需求分析活动其实本来就是一个和客户交流，引导客户能够正确的将自己的实际需求用较为适当的技术语言进行表达，以明确项目的实现。这个过程中也同时包含了对要建立的网站基本功能和模块的确立和策划活动。活动包括以下几个部分：1、与公司的负责人员进行需求分析讨论。2、编写网站开发项目描述书（初稿） 文档。3、网站开发项目描述书（初稿） 进行反复讨论和修改，确定网站开发项目描述书正式文档。4、需求分析中需要编写的文档主要是网站开发项目描述书，它基本上是整个需求分析活动的结果性文档，也是开发工程中项目成员主要可供参考的文档。为了更加清楚的描述网站开发

22、项目描述书，往往还需要编写用户调查报告和市场调研报告文档来辅助说明。各种文档最好有一定的规范和固定格式，以便增加可阅读性和方便阅读者快速理解文档内容 。为了建设符合公司要求的企业网站，本人去了公司进行了公司资料的收集，和相关人员进行了沟通，了解了其网站需实现的功能，并在次基础上对于网站的定位达成了共识。2.2 用户调查活动在需求分析的过程中，往往有很多模棱两可的用户需求，这个时候就需要调查用户的实际情况，明确用户需求。一个比较理想化的用户调查活动需要用户的充分配合，而且还有可能需要对调查对象进行必要的培训。所以调查的计划安排如时间、地点、参加人员、调查内容，都需要双方的共同认可。调查的形式可以

23、是：发需求调查表、开需求调查座谈会或者现场调研 。调查的内容主要如下：1、网站当前以及日后可能出现的功能需求。2、客户对网站的性能的要求和可靠性的要求。 3、确定网站维护的要求。4、网站的实际运行环境。5、网站页面总体风格以及美工效果。6、主页面和次级页面数量，是否需要多种语言版本、内容管理及录入任的分配等。7、各种页面特殊效果及其数量。 8、项目完成时间及进度。9、明确项目完成后的维护责任。调查结束以后，需要编写用户调查报告 。编写用户调查报告的要点是：1、调查概要说明：网站项目的名称；用户单位；参与调查人员；调查开始终止的时间；调查的工作安排。 2、调查内容说明：用户的基本情况；用户的主要

24、业务；信息化建设现状；网站当前和将来潜在的功能需求、需求、可靠性需求、实际运行环境；用户对新网站的期望等。3、调查资料汇编：将调查得到的资料分类汇总（如调查问卷，会议记录等等）。 4、界面设计。2.3 市场调研市场调研活动内容通过市场调研活动，清晰的分析相似网站的性能和运行情况。可以使本人更加清楚的构想出网站的大体架构。但是由于实际中时间、经费、公司能力所限，市场调研覆盖的范围有一定的局限性，在调研市场同类网站的时候，应尽可能调研到所有比较出名和优秀的同类网站。应该了解同类网站的使用环境与用户的差异点、类似点，同类产品所定义的用户详细需求。市场调研的重点应该放在主要竞争对手的作品或类似网站作品

25、的有关信息上。市场调研可以包括下列内容：1 、市场中同类网站作品的确定。2、调研作品的使用范围和访问人群。3、调研产品的功能设计（主要模块构成，特色功能，性能情况等等）。4、简单评价所调研的网站情况。调研的目的是明确并且引导用户需求。对市场同类产品调研结束后，应该撰写市场调研报告 。第三章 网站设计工具3.1 Dreamweaver制作工具Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网

26、站设计、开发、制作的首选工具。1、灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。3

27、、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。5、强大的WEB站点管理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性Dreamweaver 8、继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。9、丰富的媒体支持能力可以方便地加入Java

28、、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。9、超强的扩展能力Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。3.2 Adobe Photoshop软件工具Photoshop 8.0是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告

29、设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。1、文字处理更加方便2、增加的图层集使图层管理更有序。3、新增图像功能：图像的剪切和剪裁更加方便。4、将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。5、为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。3.3 Html语言HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，

30、HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下： 1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。 2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。 3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另

31、一个原因。 3.4 div+cssDIV+CSS是网站标准中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点

32、简介：1、 符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。2、 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。3、 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。4、 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 5、 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 6、 表现和结构分