洛枫公司网站建设

湖湖南南现现代代物物流流职职业业技技术术学学院院 毕毕业业设设计计 题题 目目 洛枫公司网站建设洛枫公司网站建设_ 系系 部部 物流信息系物流信息系 专专 业业 电电 子子 商商 务务 班班 级级 电商电商 姓姓 名名 指导教师指导教师 20XX 年年 XX 月月 XX 日日 1 摘摘 要要 随着计算机、网络与通讯技术的发展，Internet 在人们的生活、学习和工作的位置越 来越重要，通过发布属于公司的 Web 站点宣传推广公司产品或开展公关活动已成为一种趋 势。电子商务的发展使得企业管理模式和贸易模式发生了很大的改变，企业在发展和壮大 自己的同时也非常的注重其自身信息化和商业化程度的提高，企业网站便成为一个企业展 示自我和对外贸易的重要平台。企业门户性网站的建设和管理水平，直接影响企业的网络 形象，拥有一个设计美观、功能全面的门户性网站，已经成为企业网络化建设的一个重要 内容。 而 Web 设计的健康发展依靠 web 标准的采用，没有 web 标准就不会有真正的可访问性和连 贯的设计。不用 web 标准，就跟不上时代。在这样的标准时代，人们需要网页更加容易扩 展，适合自动数据交换，使其更加规整。而 css，则实现了页面内容与样式分离。鉴于 web 标准，本论文着重对 div+css 布局与公司网站页面实现进行了分析；同时根据公司网站的 需求，采用 div+css 实现了企业网站网页的设计，具体实现了公司首页、公司简介、公司 文化、最新动态、产品展示、虫害知识、招聘信息、服务承诺、联系我们、在线留言功能， 系统功能符合公司网站的需求。 【关键词】 企业网站 网页设计 网站建设 2 前前 言言 当今世界已进入信息时代，Internet 成为 21 世纪最受关注的行业之一,它的飞速发展 和全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的 成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络 营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建 的需求相当的迫切。各大门户网，企业网都在 WEB2.0 的标准上,采用 div+css 来布局.长沙 市洛枫有害生物防治用品有限公司为拓展网络销售市场，实施公司品牌宣传，拟建立一个 以公司宣传和产品推广为主要目的的企业网站。针对该公司的需求，本课题设计了一个满 足其要求的信息发布类网站。本网站旨在宣传公司形象及其产品推介。本网站主要实现以 下几方面功能：企业宣传，发布企业相关信息，展示企业品牌形象，展示企业产品，实现 产品推介、在线交流，从而需要对本网站的进行设计和制作。 在网站设计过程中主要是采用 dreamweaver 制作，通过将 HTML 语言、div+css 布局和 dreamweaver 工具软件整合应用，结合 photoshop 软件进行网站图片素材处理，从而实现 网站的制作和建设。 论文详细论述了一个基于公司网站开发的设计过程。在技术上，采用了 Dreamweaver 网站开发工具，以 HTML 的超大功能结合 JavaScript 的客户端语言，这样的构造有利于 对网站系统开发。其中，最主要的就是介绍和展示 DIV+CSS 在网页中的作用和魅力。 本文实现了公司首页、公司简介、公司文化、最新动态、产品展示、虫害知识、招聘 信息、服务承诺、联系我们、在线留言功能，系统基本符合公司网站的需求。论文组织如 下：首先阐述了该网站建设的研究背景、意义以及网站建设的一般流程及其原则，然后进 行网站需求分析，接下来详细介绍网站设计技术：Dreamweaver、Photoshop 制作工具、 html 语言、div+css、JavaScript 代码、淘宝客基本知识，其次介绍了网站总体规划以及 网站页面的实现。 3 目录目录 前前 言言2 第一章第一章 绪论绪论4 1.1 网站建设的研究背景4 1.2 网站建设的一般流程及其原则5 第二章第二章 网站需求分析网站需求分析8 2.1 需求分析活动9 2.2 用户调查活动9 2.3 市场调研10 第三章第三章 网站设计工具网站设计工具11 3.1 DREAMWEAVER制作工具 .11 3.2 ADOBE PHOTOSHOP软件工具.12 3.3 HTML语言.12 3.4 DIV+CSS13 3.5 JAVASCRIPT代码.13 3.6 淘宝客15 第四章第四章 网站总体规划网站总体规划17 4.1 网站首页设计17 4.2 网站内容设计17 4.3 网站功能设计18 4.4 网站结构设计18 4.5 网站页面可视化设计18 4.6 网站风格18 4.7 网站的栏目和版块设计19 第五章第五章 网站页面实现网站页面实现20 5.1 网站功能分析20 5.2 首页设计20 5.3 内页设计23 5.4 部分技术实现32 总总 结结35 致致 谢谢36 参考文献参考文献37 4 第一章第一章 绪论绪论 随着 21 世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要， 越来越多的职业需要具有计算机应用技能型人才。掌握计算机是职业的需要，更是事业发 展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网站建设的研究背景 和网站建设的一般流程及其原则。 1.11.1 网站建设的研究背景网站建设的研究背景 如今，互联网对企业来说已经不再是新鲜的事物了，大多数的企业都已经建立了自己 的网站。随着互联网的快速发展，网络已成为人们生活的一部分。电子商务、网络营销已 不再只是被炒做的概念，人们对其的认识也越来越深刻。不仅仅是大企业需要网站来开展 电子商务，中小企业一样也迫切需要自己的企业网站用以实现宣传和联系客户等许多传统 媒介无法完成的目标。搭建网站模型需要各方面的资讯，而如何在网页上正确明晰地表达 企业的资讯，使企业达到建站的目的，对建设好企业网站是有非常大的意义的。可以说， 有正确的建站思路再配合下文所讲的具有普遍性的建站原理才能创造出真正的企业网站， 而不是只在技术上苦苦追求完美，堆砌出华丽却没有实际意义的工艺品。 电子商务是一种新兴的、处于发展过程中的现代商务方式，从 95 年来得到了迅速发展， 显现了巨大的现代商业价值。1997 年欧洲、美国、新加坡等许多国家政府发表了电子商务 发展纲要，其目的是引导全球电子商务的自由竞争和健康发展，大力推动电子商务的实践。 本国政府的发展纲要也将在近期出台，促进本国企业适应国际化的发展、参与国际竞争。 有理由相信，在 21 世纪，电子商务将逐渐成为社会生活的主要方式，也将成为数字化社会 的基础。 电子商务活动是通过公共计算机通信网络进行商务活动的现代方式，该方式将突破传 统商务在时间、地域上的限制，成为方便、快捷、安全可靠的新兴电子化商务活动模式。 电子商务使现代商务活动具有安全、可靠、快速、明确和方便的特点，通过国际互联网络 人们可随时随地开展电子商务活动。由于电子商务涉及社会、经济、金融、法律以及生活 等许多方面，故存在一定的困难和问题。其健康发展一方面要求人们的工作生活方式、思 想观念和管理方法都将有根本的变革；另一方面国家宏观控制和管理需要对电子商务进行 立法和规范；再者技术安全上必须完善可靠。电子商务的发展将逐步改变人们的生活及工 5 作方式，原来面对面谈判、纸上交流的管理与商务活动方式逐步变成了由计算机远距离操 作完成的数字化活动方式。没有了时间、空间和人为条件上的限制，人们的生活和工作将 变得方便、灵活和自如。特别在获取信息、传输信息、各种服务活动、付款、送货方式等 方面将有根本的变化。任何合法组织和公司甚至个人通过在国际互联网络上建立自己的站 点都可成为全球化的信息发布者；信息的获取具有了广泛的内容和选择性；贸易、商务活 动中的商品认识、合同谈判、交易都通过国际互联网信息和网络软件完成。企业行政管理 将进入电子化办公方式，金融服务中的支票、柜台、保险、投资、企业银行业务和家庭银 行业务将搬到网络上进行。数字化电子货币的使用与发展为人们进行跨地域的商务金融活 动提供了方便条件。人类将不可避免地习惯与计算机共存，适应电子商务时代的数字化生 存。电子商务也完全改变了人们当今的商务方式，由于没有了时间和空间的限制，人们可 以在家中处理各种业务。 1.21.2 网站建设的一般流程及其原则网站建设的一般流程及其原则 1、网站建设流程 一个网站的成功与否与网站制作前的规划有着极为重要的关系。为使网站能够达到预 期的目的，满足用户要求，不仅需要在网站建设过程中与用户方进行良好的沟通与交流， 更重要的是要遵循网站建设流程，只有这样，才能做到既不浪费时间也能提高效率，又能 保证网站的科学性、严谨性。一般将网站设计过程分为以下几个阶段： A、对网站需求的分析 首先要明确网站制作的目的和具体要求是什么，进行网站的功能定位，从而确定网站 制作类型。 B、根据需求来规划设计 确定网站类型后，在正是建站前需要对网站进行一系列的规划与设计。网站规划主要 包括网站的类型选择、主题设计、风格设计、内容设计、版面布局设计以及网站策划书的 撰写等。网站规划对网站建设起到计划和指导作用，对网站的内容和维护起到定位作用。 这一环节的有无和好坏，不仅直接影响网站的整体效果，而且是网站发布后能否成功运行 的主要因素。 C、确认好设计之后进行美工操作、网站制作 经过精心设计的网站规划方案最终要通过网页表现出来，制作网页是将网站规划付诸 6 实施的主要任务。在制作页面前要考虑到网站的风格和功能，要根据所建网站的特点做充 分准备，使网站的基本格调符合用户的要求，使网站的功能满足用户的使用需求。 2、 网站建设原则 A、网站第一原则: 目的性 任何一个网站,首先必须具有明确的目的和目标群体。网站是面对客户、供应商、消费 者还是全部? 主要目的是为了介绍企业、宣传某种产品还是为了试验电子商务? 如果目的 不是唯一的,还应该清楚的列出不同目的的轻重关系。建站包括类型的选择、内容功能的筹 备、界面设计等各个方面都受到目的性的直接影响, 因此目的性是一切原则的基础。建站 的目的应该是经过成熟考虑的, 包含几大要素:目的应该是明确定义的,而不是笼统地说要 做一个平台、 要弄电子商务, 应该清楚主要希望谁来浏览,具体要做到哪些内容, 提供怎 样的服务,达到什么样是效果。在当前的资源环境下能够实现的, 而不能脱离了自身的人力、 物力、互联网基础以及整个外部环境等因素盲目制定目标, 尤其是对外部环境的考虑通常 容易被忽略,结果只能成为美好的一厢情愿。如果目标比较庞大,应该充分考虑各部分的轻 重关系和实现的难易度, 想要一步登天的做法通常会导致投入过大且缺少头绪,不如分清主 次循序渐进。在充分考虑了目的和目标群体的特点以后, 再来选择建站类型, 并相应的安 排适当的信息内容和功能服务。 B、网站第二原则: 专业性 信息内容应该充分展现企业的专业特性对外介绍企业自身,最主要的目的是向外界介绍 企业的业务范围、性质和实力,从而创造更多的商机。在这里包括:应该完整无误的表述企 业的业务范围( 产品、服务)及主次关系、应该详细的介绍企业的地址、性质、联系方式、 提供企业的年度报表、则有助于浏览者了解企业的经营状况、方针和实力。 C、网站第三原则: 实用性 网站提供的功能服务应该是切合浏览者实际需求，并且符合企业特点。网站提供的功 能服务必须保证质量,包括:每个服务必须有清晰定义的流程,每个步骤需要什么条件、产生 什么结果、由谁来操作、如何实现等都应该是清晰无误的，实现功能服务的程序必须是正 确的、健壮的、能够及时响应的、能够应付预想的、同时请求服务数峰值的。需要人工操 作的功能服务应该设有常备人员和相应责权制度。用户操作的每一个步骤完成后，应该被 提示当前处于什么状态。当功能较多的时候应该清楚的定义相互之间的轻重关系,并在界面 上和服务响应上加以体现。 D 、网站第四原则: 层次性 7 条理清晰的结构,表现为网站的板块划分的合理性,这里需要注意:板块的划分应该有充 分的依据并且是容易理解的。不同板块的内容尽量做到没有交叉重复内容,共性较多的内容 应尽量划分到同一板块。在最表层尽量减少划分的板块数量, 通常控制在 4 6 之间比较 合适。划分后的结构层次不宜过深, 通常不超 5 层为佳。在安排层次的时候要充分考虑用 户操作, 比较常用的信息内容、功能服务应该尽量放到更浅的层次以减少用户点击次数。 信息内容的获取和功能服务的过程都应该尽量将所需要进行的步骤控制在 3 5 步以内,不 得不需要更多的步骤的时候应该有明确的提示。 E、 网站第五原则: 艺术性 网页创作本身已经成了一种独特的艺术,要达到吸引眼球的目的,再结合界面设计的相 关原理,形成了一种独特的艺术,这使得企业网站的设计应该满足:遵循基本的图形设计原则,符 合基本美学原理和排版原则。对于主题和次要对象的处理符合排版原理。全站的设计作为 一个整体, 应该具有整体的一致性。整体视觉效果特点鲜明:页面版式结构;用色;线条和构 图; 配图的精细、观程度; 元素风格;整体气氛表达;字体选用。整体风格同企业形象相符 合, 适于目标对象的特点。 8 第二章第二章 网站需求分析网站需求分析 网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的基础设施和信 息平台。企业的网址被称为“网络商标” ，也是企业无形资产的组成部分，而网站则是反映 企业形象和文化的重要窗口。 一个网站项目的确立是建立在各种各样的需求之上的。这种需求往往来自于客户的实 际需求。由于网站需要面对不同层次的用户,因此网站项目的负责人对用户需求的理解,在 很大程度上决定了此类网站开发项目的成败。如何更好地了解、分析、明确用户需求,并且 能够准确、清晰地以文档的形式表达给参与项目开发的每个成员,保证开发过程按照用户需 求进行,是每个网站开发项目管理者需要面对的问题。需求分析工作是网站建设中重要的一 步,也是决定性的一步。只有通过需求分析,才能把网站功能的总体概念描述为具体的网站 功能描述书,从而奠定网站开发的基础。需求分析的目的是完整、准确地描述用户的需求, 跟踪用户需求的变化,将用户的需求准确地反映到系统的分析和设计中,并使系统的分析、 设计与用户的需求保持一致。 长沙市洛枫有害生物防治用品有限公司是一家专业从事白蚁、蟑螂、老鼠、蚊蝇、蚂 蚁、跳蚤、臭虫、蜱等病媒生物防治及产品销售的专业公司。该公司本着 “以人为本、诚 信服务、口碑相传、永续经营”的服务原则，推崇“诚信、高效、安全、环保”的控虫理 念，以改善和保护人们的生活环境、自然环境为目的。 该公司为拓展网络销售市场，实施公司品牌宣传，拟建立一个以公司宣传和产品推广 为主要目的的企业网站。针对该公司的需求，本课题设计了一个满足其要求的信息发布类 网站。本网站旨在宣传公司形象及其产品推介。本网站主要实现以下几方面功能：企业宣 传，发布企业相关信息，展示企业品牌形象，展示企业产品，实现产品推介、在线交流。 与此同时借助了淘宝客的使用，点击产品展示中的图片，就可以链接到淘宝旗舰店，从而 可以进行产品的购买。 在网站设计过程中主要是采用 dreamweaver 制作，通过将 HTML 语言、div+css 布局、 JavaScript 代码，结合 Photoshop 软件进行网站图片素材处理，从而实现网站的制作和建 设。 9 2.12.1 需求分析活动需求分析活动 需求分析活动其实本来就是一个和客户交流，引导客户能够正确的将自己的实际需求 用较为适当的技术语言进行表达，以明确项目的实现。这个过程中也同时包含了对要建立 的网站基本功能和模块的确立和策划活动。活动包括以下几个部分： 1、与公司的负责人员进行需求分析讨论。 2、编写网站开发项目描述书（初稿） 文档。 3、 网站开发项目描述书（初稿） 进行反复讨论和修改，确定网站开发项目描述 书正式文档。 4、需求分析中需要编写的文档主要是网站开发项目描述书 ，它基本上是整个需求 分析活动的结果性文档，也是开发工程中项目成员主要可供参考的文档。为了更加清楚的 描述网站开发项目描述书 ，往往还需要编写用户调查报告和市场调研报告文档 来辅助说明。各种文档最好有一定的规范和固定格式，以便增加可阅读性和方便阅读者快 速理解文档内容 。 为了建设符合公司要求的企业网站，本人去了公司进行了公司资料的收集，和相关人 员进行了沟通，了解了其网站需实现的功能，并在次基础上对于网站的定位达成了共识。 2.22.2 用户调查活动用户调查活动 在需求分析的过程中，往往有很多模棱两可的用户需求，这个时候就需要调查用户的 实际情况，明确用户需求。一个比较理想化的用户调查活动需要用户的充分配合，而且还 有可能需要对调查对象进行必要的培训。所以调查的计划安排如时间、地点、参加人员、 调查内容，都需要双方的共同认可。调查的形式可以是：发需求调查表、开需求调查座谈 会或者现场调研 。 调查的内容主要如下： 1、网站当前以及日后可能出现的功能需求。 2、客户对网站的性能的要求和可靠性的要求。 3、确定网站维护的要求。 4、网站的实际运行环境。 5、网站页面总体风格以及美工效果。 10 6、主页面和次级页面数量，是否需要多种语言版本、内容管理及录入任的分配等。 7、各种页面特殊效果及其数量。 8、项目完成时间及进度。 9、明确项目完成后的维护责任。 调查结束以后，需要编写用户调查报告 。编写用户调查报告的要点是： 1、调查概要说明：网站项目的名称；用户单位；参与调查人员；调查开始终止的时间； 调查的工作安排。 2、调查内容说明：用户的基本情况；用户的主要业务；信息化建设现状；网站当前 和将来潜在的功能需求、需求、可靠性需求、实际运行环境；用户对新网站的期望等。 3、调查资料汇编：将调查得到的资料分类汇总（如调查问卷，会议记录等等） 。 4、界面设计。 2.32.3 市场调研市场调研 市场调研活动内容通过市场调研活动，清晰的分析相似网站的性能和运行情况。可以 使本人更加清楚的构想出网站的大体架构。但是由于实际中时间、经费、公司能力所限， 市场调研覆盖的范围有一定的局限性，在调研市场同类网站的时候，应尽可能调研到所有 比较出名和优秀的同类网站。应该了解同类网站的使用环境与用户的差异点、类似点，同 类产品所定义的用户详细需求。市场调研的重点应该放在主要竞争对手的作品或类似网站 作品的有关信息上。 市场调研可以包括下列内容： 1 、市场中同类网站作品的确定。 2、调研作品的使用范围和访问人群。 3、调研产品的功能设计（主要模块构成，特色功能，性能情况等等） 。 4、简单评价所调研的网站情况。调研的目的是明确并且引导用户需求。对市场同类产 品调研结束后，应该撰写市场调研报告 。 11 第三章第三章 网站设计工具网站设计工具 3.13.1 DreamweaverDreamweaver 制作工具制作工具 Dreamweaver 是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件， 随着 Dreamweaver 8 的发布，更坚定 Dreamweaver 在该领域的地位。它集网页设计、网站 开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设 计、开发、制作的首选工具。 1、灵活的编写方式 Dreamweaver 具有灵活编写网页的特点，不但将世界一流水平的 “设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作 需要定制自己的用户界面。 2、可视化编辑界面 Dreamweaver 是一种所见即所得的 HTML 编辑器，可实现页面元 素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容 性，并且可以对内部的 HTML 编辑器和任何第三方的 HTML 编辑器进行实时的访问。无 论用户习惯手工输入 HTML 源代码还是使用可视化的编辑界面，Dreamweaver 都能提供便 捷的方式使用户设计网页和管理网站变得更容易。 3、功能更多的 CSS 支持CSS 可视化设计、CSS 检查工具 4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何 种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的 tags 或 CSS 结构。动态跨浏览器有效性检查功能可以自动核对 tags 和 CSS 规则是否适应目前 的主浏览器。 5、强大的 WEB 站点管理功能 6、内建的图形编辑引擎 7、Dreamweaver 的集成特性 Dreamweaver 8、继承了 Fireworks、Flash 和 Shockwave 的集成特性，可以在这些 Web 创作工具之 间自由地切换，轻松地创建美观实用的网页。 9、丰富的媒体支持能力可以方便地加入 Java、Flash、Shockwave、ActiveX 以及其他 媒体。Dreamweaver 具有强大的多媒体处理功能，在设计 DHTML 和 CSS 方面表现得极为 出色，它利用 JavaScript 和 DHTML 语言代码轻松地实现网页元素的动作和交互操作。 12 Dreamweaver 还提供行为和时间线两种控件来产生交互式响应和进行动画处理。9、超强的 扩展能力 Dreamweaver 还支持第三方插件，任何人都可以根据自己的需要扩展 Dreamweaver 的功能，并且可以发布这些插件。 3.23.2 AdobeAdobe PhotoshopPhotoshop 软件工具软件工具 Photoshop 8.0 是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编 辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。 1、文字处理更加方便 2、增加的图层集使图层管理更有序。 3、新增图像功能：图像的剪切和剪裁更加方便。 4、将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。 5、为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模 式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。 3.33.3 HtmlHtml 语言语言 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是 目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命 令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部（Head） 、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主 体则包含所要说明的具体内容。 HTML 文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是 WWW 盛行的原因之一，其主要特点如下： 1、简易性，HTML 版本升级采用超集方式，从而更加灵活方便。 2、可扩展性，HTML 语言的广泛应用带来了加强功能，增加标识符等要求，HTML 采取 子类元素的方式，为系统扩展带来保证。 3、平台无关性。虽然 PC 机大行其道，但使用 MAC 等其他机器的大有人在，HTML 可以 使用在广泛的平台上，这也是 WWW 盛行的另一个原因。 13 3.43.4 div+cssdiv+css DIV+CSS 是网站标准中常用术语之一，div+css 是一种网页的布局方法,这一种网页布 局方法有别于传统的 HTML 网页设计语言中的表格定位方式,真正地达到了 w3c 内容与表现 相分离。HTML 语言自 HTML4.01 以来，不再发布新版本，原因就在于 HTML 语言正变得越来 越复杂化、专用化。XHTML 语言是一种可以将 HTML 语言标准化，用 XHTML 语言重写后的 HTML 页面可以应用许多 XML 应用技术。使得网页更加容易扩展，适合自动数据交换，并且 更加规整。在 XHTML 网站设计标准中，不再使用表格定位技术，而是采用 DIV+CSS 的方式 实现各种定位。以下是 DIV+CSS 的特点简介： 1、 符合 W3C 标准。微软等公司均为 W3C 支持者。这一点是最重要的，因为这保证您 的网站不会因为将来网络应用的升级而被淘汰。 2、 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是 IE7 或者是火 狐，您的网站都能很好的兼容。 3、 搜索引擎更加友好。相对与传统的 table, 采用 DIV+CSS 技术的网页，对于搜索 引擎的收录更加友好。 4、 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在 YAHOO,MSN 等国际门户网站，网易，新浪等国内门户网站，和主流的 WEB2.0 网站，均 采用 DIV+CSS 的框架模式，更加印证了 DIV+CSS 是大势所趋。 5、 CSS 的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽， 而且众所周知，搜索引擎喜欢清洁的代码。 6、 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。 3.53.5 JavaScriptJavaScript 代码代码 JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也 是一种广泛用于客户端 Web 开发的脚本语言，常用来给 HTML 网页添加动态功能，比如响应 用户的各种操作。它最初由网景公司的 Brendan Eich 设计，是一种动态、弱类型、基于原 型的语言，内置支持类。JavaScript 是 Sun 公司的注册商标。Ecma 国际以 JavaScript 为 基础制定了 ECMAScript 标准。JavaScript 也可以用于其他场合，如服务器端编程。完整 的 JavaScript 实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。 14 Netscape 公司在最初将其脚本语言命名为 LiveScript。在 Netscape 在与 Sun 合作之 后将其改名为 JavaScript。JavaScript 最初受 Java 启发而开始设计的，目的之一就是 “看上去像 Java”2，因此语法上有类似之处，一些名称和命名规范也借自 Java。但 JavaScript 的主要设计原则源自 Self 和 Scheme3.JavaScript 与 Java 名称上的近似， 是当时网景为了营销考虑与 Sun 公司达成协议的结果。为了取得技术优势，微软推出了 JScript 来迎战 JavaScript 的脚本语言。为了互用性，Ecma 国际（前身为欧洲计算机制造 商协会）创建了 ECMA-262 标准（ECMAScript） 。现在两者都属于 ECMAScript 的实现。尽管 JavaScript 作为给非程序人员的脚本语言，而非作为给程序人员的编程语言来推广和宣传， 但是 JavaScript 具有非常丰富的特性。 JavaScript 代码能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入 其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型） 、 Layers 和 Cascading Style Sheets（CSS，层叠样式表） ，这里主要讲 Javascript。那么 Javascript 是什么东东？Javascript 就是适应动态网页制作的需要而诞生的一种新的编程 语言，如今越来越广泛地使用于 Internet 网页制作上。Javascript 是由 Netscape 公司开 发的一种脚本语言，或者称为描述语言。在 HTML 基础上，使用 Javascript 可以开发交互 式 Web 网页。Javascript 的出现使得网页和用户之间实现了一种实时性的、动态的、交互 性的关系，使网页包含更多活跃的元素和更加精彩的内容。运行用 Javascript 编写的程序 需要能支持 JavaScript 语言的浏览器。Netscape 公司 Navigator 30 以上版本的浏览器 都能支持 JavaScript 程序，微软公司 Internet Explorer 30 以上版本的浏览器基本上 支持 JavaScript。微软公司还有自己开发的 JavaScript，称为 JScript。JavaScript 和 Jscript 基本上是相同的，只是在一些细节上有出入。 JavaScript 短小精悍，又是在客户 机上执行的，大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作 Web 网页而 量身定做的一种简单的编程语言。 JavaScript 使网页增加互动性。JavaScript 使有规律地重复的 HTML 文段简化，减少 下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间 交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。 15 3.63.6 淘宝客淘宝客 淘宝客是指通过互联网帮助淘宝卖家推广商品，并按照成交效果获得佣金的人或者集 体（可以是个人、网站、团体、公司） 。 1、组成模式 在淘宝客中，有淘宝联盟、卖家、淘客以及买家四个角色，他们每个都是不可缺失的 一环，如图所示。 图 3.1 淘宝联盟组成模式 （1）淘宝联盟：一个推广平台，帮助卖家推广产品；帮助淘客赚取利润，每笔推广的 交易抽取 10%的服务费用。 （2）卖家：佣金支出者，他们提供自己需要推广的商品到淘宝联盟，并设置每卖出一 个产品愿意支付的佣金。 （3）淘宝客：佣金赚取者，他们在淘宝联盟中找到卖家发布的产品，并且推广出去， 当有买家通过自己的推广链接成交后，那么就能够赚到卖家提供的佣金（其中一部分需要 作为淘宝联盟的服务费） 。 （4）买家：就是单纯的购买者。 2、发展历程 2009 年 1 月 12 日起，国内网络营销平台“淘客推广平台”正式更名为淘宝客，意味 着大淘宝战略实施后，原淘客推广平台与淘宝交易平台的进一步整合的完成！ 2010 年 3 月 19 日消息，基于淘宝客的“淘宝联盟”已悄然成型，淘宝网将在近日针 对中小站长以及网络合作伙伴推出这一平台。所有用户都可以自由申请加入淘宝联盟，当 通过注册申请后，即可成为一名“淘宝客” 。 目前淘宝客的推广是一种按成交计费的推广模式，淘宝客只要从淘宝客推广专区获取 商品代码，任何买家（包括您自己）经过您的推广（链接、个人网站，博客或者社区发的 16 帖子）进入淘宝卖家店铺完成购买后，就可得到由卖家支付的佣金。 3、具体形式 淘宝客推广目前主要可以分成如下 2 大类： （1）拥有独立平台的专业淘宝客：这类淘宝客精通网站技术，搭建专业的平台，如淘 宝客返利网站（惠集网,返利，QQ 等） 、独立博客、商品导购平台、用户分享网站（美丽说） 等来吸引客户，赚取一定的佣金。 （2）自由的淘宝客：这类淘宝客没有固定的推广方式，不管技术还是实力都不是很雄 厚，主要论坛、博客、SNS 平台，或者微博、邮件、Q 群等作为推广方式。很适合大众新手。 17 第四章第四章 网站总体规划网站总体规划 随着互联网的普及和发展, 电子商务成为企业和商家的最终选择,它具有开放性、国际 性、实时性、互动性和低成本的特点,越来越受到企业的青睐。而企业要实现电子商务活动 则必须依赖于电子商务网站。所谓电子商务网站是企业开展电子商务的基础设施和信息平 台,是实施电子商务的公司或商家与服务对象的交互页面,是电子商务系统运转的承担者和 表现者。无论是什么样的企业,电子商务网站都是企业在互联网平台上与客户交流的一个窗 口,是买卖双方信息交流与传递的渠道,是企业宣传其形象,展示其产品与服务的平台。电子 商务网站的设计是否合理,功能是否齐全,用户使用是否方便,安全是否得到保障是企业实现 电子商务成败的关键。 4.14.1 网站首页设计网站首页设计 首页设计是一个网站成功与否的关键。是否能够吸引浏览者留在站点上,是不是能够促 使浏览者继续点击进入,全凭首页设计的效果。所以,首页的设计和制作必须高度重视。从根 本上说,首页就是全站内容的目录,也是一个索引。但不能只是简单地罗列目录,要设计好一 个首页,必须做好以下几方面的工作:一是要确定好首页的功能模块,如网站名称、主菜单、 新闻、友情链接、版权等;二是要设计好首页的版面,在网站功能模块确定后,要开始设计首 页的版面;三是首页的内容要紧扣主题,不要太过繁杂;四是要确保首页能够快速安全访问;五 是首页的结构要简单清晰;六是首页的色彩搭配要合理,不要使用过多的颜色。总之,首页的 规划应该是:主题鲜明而富有特色、内容精炼而新颖、结构简单而清晰、访问安全而快速、 功能完善而易用、 布局合理而高雅、色彩鲜明而和谐,具有亲和力和吸引力,能够留住以前 的访问者和不断吸引新的访问者。 4.24.2 网站内容设计网站内容设计 信息内容是网站的核心与灵魂,是网站最根本的要素。如果说网站架构是骨架, 那么网 站内容就是血和肉,是浏览者了解企业的关键。 在确定网站内容时,第一, 要保证网站的内容要新颖、精炼、专业、准确、真实; 第二,虽 18 然图像、声音和视频信息能够比普通文本提供更丰富和更直接的信息,产生更大的吸引力, 但由于目前网络速度的限制文本字符可提供较快的浏览速度,因此,图像和多媒体信息的使 用要适中。另外减少文件数量和大小也是必要的。第三,网站内容要及时更新,经常维护更 新,给用户提供最新的信息,是网站增加吸引力的重要手段。 4.34.3 网站功能设计网站功能设计 在进行网站功能设计时,首先要知道网站的具体内容,所以网站的功能和网站所提供的 内容息息相关。在进行企业网站功能设计时应该进行网站需求分析，网站功能的设计取决 于网站的目标和规模,所以在进行网站功能设计时,首先要确定网站的目标和规模,在此基础 上再决定网站应该具有哪些功能,从而才能符合网站实际需求。 4.44.4 网站结构设计网站结构设计 为了实现信息的有效传递,使访问者方便快速地查找所需要的信息,也为了便于网站正 式运行后网站的更新和维护,网站结构设计十分重要。网站的结构包括网站的目录结构和网 站的链接结构。规划合理的目录结构对于网站所有者来说,可以在以后的内容更新和维护中,节 省大量的时间和精力。目录结构是一个容易忽略的问题,很多网站都是未经规划,随意创建 目录和子目录。目录结构的好坏,对浏览者并没有什么太大的影响,但是对于站点本身的上 传维护、未来的内容扩充和移植有着重要的影响。 4.54.5 网站页面可视化设计网站页面可视化设计 页面可视化设计主要包括页面组织效果、页面色调效果、页面版式设计、页面美术设 计等几方面内容。在页面组织过程中,可以运用对比与调和、对称与平衡、节奏与韵律以及 留白等手段。在网页配色中,还应该注意:一是不要将所有颜色都用到,尽量控制在三种色彩 以内;二是背景和前景的对比尽量要大,绝对不要用花纹繁复的图案作背景,以便突出主要文 字内容。对于版面布局的设计,应当重视如下原则:加强视觉效果,加强文字图案的可视度和 可读性;统一感的视觉;新鲜和个性是布局的最高境界。 19 4.64.6 网站风格网站风格 网站的整体风格是人们最希望掌握,也是最难以掌握的。其难点在于没有一个固定的模 式可以参照和模仿。如果要设计和普通网站有区别的站点,则必须要研究网站的整体风格。 风格是抽象的,是指站点的整体形象给浏览者的综合感受;风格是独特的,是一个站点不同于 其他网站的地方,或者色彩、或者技术、或者交互性; 风格是有人性的,通过网站的外表、 内容、文字和交流,可以概括一个网站的个性。 4.74.7 网站的栏目和版块设计网站的栏目和版块设计 设计网站的中心工作之一, 就是设置网站的栏目和版块。栏目的实质是网站的大纲索 引,索引应该将网站的主体明确地显示出来。在制定栏目的时候,要仔细考虑,合理安排。一 般的网站栏目安排要注意以下几方面:一是紧扣主题;二是设立一个最近更新或网站指南栏 目; 三是设定一个可以双向交流的栏目;四是设计一个下载或常见问题解答栏目。版块比栏 目的概念要大一些,每个版块都有自己的栏目。例如,网易的站点分新闻、体育、财经、娱 乐、教育等版块,每个版块下面还有各自的主栏目。一般的个人站点内容少,只有主栏目就 够了。根据以上几点，设计了网站的整体结构：网站的前台页面包括公司首页、公司简介、 公司文化、最新动态、产品展示、虫害知识、招聘信息、服务承诺、联系我们、在线留言 等。 图 4.1 网站总体结构图 20 第五章第五章 网站页面实现网站页面实现 有了网站设计的基础，企业网站的需求，技术的支持等一系列的准备之后就可以开始 设计一个网站了，下面就说说长沙洛枫有害生物防治有限公司企业网站的页面实现。 5.15.1 网站功能分析网站功能分析 将要做的是一个公司网站，该公司是一家专业从事白蚁、蟑螂、老鼠、蚊蝇、蚂蚁、 跳蚤、臭虫、蜱等病媒生物防治及产品销售的专业 PCO 公司。因此建设网站的目的主要有 两个：一是使浏览者或潜在的客户迅速了解公司，这就要求网站的文字要简练，尽量减少 大篇幅的文字叙述，项目效果图要精彩，当然网页的页面效果也要漂亮，以使浏览者或潜 在的客户感觉到公司的实力和品牌；二是使浏览者或潜在的客户迅速了解及熟悉公司的相 关产品。 建立公司网站要有一个清晰的网站布局。比如说，导航条要不要？很多人说那东西人 人在做，就显得太俗没个性，难显示出新潮。但导航条之所以有那么多人在用，是因为它 给浏览者一个明确的布局，便利人们查找本身所需的信息。从某种角度上说，大家都在用 的东西就说明它确实被大家所接受。要清楚网站做出来是给每一个人普通用户看的。网站 还要经常更新，给人以新意。 网站的前台页面包括公司首页、公司简介、公司文化、最新动态、产品展示、虫害知 识、招聘信息、服务承诺、联系我们、在线留言等。 5.25.2 首页设计首页设计 有了基于准备之后的网站策划，就可以开始进行页面设计了，页面设计主要包括创意、 色彩和版式三个方面。创意会使网页在众多的竞争对手中脱颖而出；色彩可以使网页获得 生命的力量；板式则是和用户沟通的核心，所以这三者缺一不可。 一般的网站都需要这样一些版块站名称、广告区，导航区、新闻区、友情链接和版权 等版块。这些版块又可以称之为模块。选择哪些模块，实现哪些功能是否需要添加其他模 块都是首页设计制作时首先需要确定的，下面就开始具体的首页设计制作工作。 21 1、网站首页结构 根据需求可以知道，版面布局采用的是 CSS 定位、层、和表格等技术，CSS 可以很方 便地修改网页的格式、减小网页的体积、轻松增加网页的特殊效果，用 CSS 固定好每个区 域要放置的内容后，再附加用层或表格；页面结构是 Logo 于整个页面的头部， 然后是 Banner 和导航条，中间是网页的主要内容，最底层是版权。 这种结构既美观又符合人们 的浏览习惯。 图 5.1 页面布局图 2、风格定位 打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版 面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某 种程度上取决于色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图 形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印 象。因此，在设计网页时，必须要高度重视色彩的搭配。 本网站的搭配主色为：白、淡蓝、绿、三种颜色。白色代表纯洁、纯真、朴素、神圣、 明快。淡蓝色代表热情、活泼、热闹、温暖、幸福、吉祥。绿色代表心情平静，心旷神怡, 安详娴静,心情很安定、舒适，充分代表了一个企业应有的气质和形象。给客户留下深刻的 印象。 3、页头设计 网站的页头主要分为两个部分。一是 Logo，logo 是一张公司的标志图，直接放置在头 部容器左侧，调整好位置；二是导航条，网站导航条因为有立体感效果，因此它需要脱离 22 文本流，因此在控制样式的时候要用定位，相对于文本流的定位。网站的导航栏目可以让 用户对网站的内容及信息一目了然。导航分为：公司首页、公司简介、公司文化、最新动 态、产品展示、虫害知识、招聘信息、服务承诺、联系我们、在线留言。 4、banner 设计 Banner 可以说是企业网页中一道美丽的风景线。网页中的 banner 信息代表着一个企 业的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个企业应该有的 朝气和活力。因此 banner 图片加文字说明成为首选。实例展示从侧面让客户了解到公司的 实力。在首页的版面，先是用 Photoshop 对网站模板进行切片，然后用 DIV+CSS 进行排版。 图 5.2 banner 效果图 5、首页主信息部分设计 根据浏览者在阅读时经常采用从上到下，从左到右的习惯，主体内容中，分为三个板 块：左栏：白蚁危害的视频、联系我们；中栏：公司简介、公司动态；右栏：虫害知识、 服务项目；下方还有一栏产品展示，这样能更好地吸引浏览者的眼球，同时也体现公司的 专业、能力等。优秀网站案例采用网页图片切换的形式展现在首页中，使整个首页处于于 静于动的画面，这种结构既美观又符合人们的浏览习惯。 23 图 5.3 首页主信息部分效果图 6、页脚 页脚用了表格嵌套，采用了四行布局，第一行是友情链接，第二行是公司网址，第三 行是版权所有，第四行是流量统计代码，另外右下角还有一个回到顶部的按钮。 图 5.4 底部版权图 24 图 5.5 首页整体图 5.35.3 内页设计内页设计 其他页面的导航和页面属性都是采用首页的导航和 body 属性，左边部分固定，显示虫 害知识和联系我们两个板块。 1、公司简介 公司简介界面介绍了公司基本情况，让客户更好的了解公司的产品和服务。效果图如 下图 5.6 所示： 25 图 5.6 公司简介效果图 2、公司文化 公司文化板块让客户清晰的了解公司的文化，服务信息等等。公司文化是随着企业的 诞生和发展而共同生存的,并在企业中起着巨大的作用,是企业发展的能源,一个好的企业必 然有一个有凝聚力的企业文化伴随企业的发展和壮大。效果图如下图 5.7 所示： 26 图 5.7 公司文化效果图 3、最新动态 最新动态板块介绍了公司的行业动态，让客户更好的了解公司发展状况，发展前景等， 效果图如下图 5.8 所示： 27 图 5.8 最新动态效果图 4、产品展示 产品展示页面用来展示公司所销售的各种产品，点击图片链接可以进入淘宝旗舰店进 行购买，主要是用来产品推介。效果图如下 5.9 图所示： 28 图 5.9 产品展示/淘宝店页面效果图 5、虫害知识 虫害知识板块能让客户更好的了解各种有害生物的危害和防治方法，从而有助于激进 客户购买公司的各种产品，界面效果如下图 5.10 所示： 29 图 5.10 虫害知识效果图 6、招聘信息 招聘信息板