网站项目开发概述.doc

第一章 网站项目开发概述网站开发是一个比较复杂的过程，在学习具体的技术细节之前，了解建设的过程是十分重要的。这部分内容理论性比较强，但要想做真正的项目开发就必须要去了解，这样才能让你在以后的学习中做到心中有数。网站项目开发由始至终分为网站策划、人员组织、页面设计制作、动态编程、测试发布、宣传与维护、项目总结几个阶段。当确定项目后，需要有一个整体的开发目标，然后设计网站的关键页面，一般动态网站还需要动态编程。当站点所有内容完成并且测试通过后，就可以在网上发布了。但工作还远没有完，宣传和维护工作任重而道远，而且往往经过一段时间之后，网站还需要重新进行开发，因此它实际上是一个循环往复的过程。图1-1网站开发流程了解网站开发流程对于做好一个商业化的项目十分关键，因为你是在给一个公司做网站，要达到的是客户的要求，这一点是任何时候都要牢记的。下面我们以“新东方IT教育网上书城”（以下简称“网上书城”）的建设为例给大家介绍专业网站项目开发的一般流程。1.1网站项目竞标“新东方IT教育网上书城公司”是新东方IT教育要创建的网上售书交流平台，主办单位首先在多家网络公司中招标。新东方IT教育应用软件教学部也参与了这次竞标，教学部接到招标项目后，立即组织相关人员进行项目的策划，在三天之内拿出了具体解决方案。网站项目竞标前需要根据客户的要求深入分析，重点是考虑这样几个问题：1、如果做这个项目是否能够盈利、大致盈利多少；2、如果要做，应决定做出的网站主要针对的是什么人、这些人具体需要什么服务；3、客户要实现什么功能和目的；4、定出网站的宣传口号、网站结构等内容。分析完后，由项目主管写出可行性研究报告，陈述该项目的可行性。部门通过后将会要求写出周密细致的方案书（标书）提交给项目客户，如果客户与公司达成一致，即可签订合同，开始制作过程。具体过程包括：需求分析、可行性研究、项目计划的制定、方案书、签订开发合同等步骤。图1-2网站项目竞标流程1.1.1需求分析与客户会面，请客户填写项目调查表或者由客户提供项目要求资料，明确项目需求。下面是由新东方IT教育提供的项目基本需求资料。表1-1 客户基本需求分类具体要求网站风格清新活泼、大众化。前台栏目至少有最新图书、热点图书、新书预告、本月排行、案例下载、原创交流、技术论坛、客户反馈、公司简介等栏目。后台管理安全、稳定。能实现商品的管理、查询、统计分析等功能，能实现分级管理。1.1.2可行性研究可行性研究的目的是根据客户提出的要求，确定项目是否可以做，做得话能否赢利。在做决定之前，重点需要确定以下内容：1、明确开发目的、功能要求和主要工作内容；2、开发所需要的主要技术、软硬件条件；3、确定完成网站的时间长短；4、所有的费用开支预算；5、判断客户的信誉，是否有支付能力；6、如果项目竞争激烈，需要了解竞争对手的具体情况，做到知己知彼；以上内容明晰之后，项目主管需要提交一份项目可行性研究报告，具体阐述以上几个方面的内容。报告由公司决策层审阅，如果通过开始制定比较详实的项目计划书。表1-1是应用软件教学部提交给部门经理审阅的可行性研究报告。表1-2 新东方IT教育网上书城可行性研究报告一、新东方IT教育网上书城概要新东方IT教育网上书城是新东方电脑部网上售书系统，属于典型的电子商务平台。网站旨在推动新东方电脑部教材的研发和推广，推广新东方电脑培训品牌。目前应用软件教学部共有四位老师可以参加该项目的开发，另外还有公司内部网管等人可以协助该项目，人员结构比较完整。由于参加人员均有相关开发经验，可以保证项目高质量的完成。二、我们需要做的工作1. 网络结构新东方IT教育内部已经形成相对完整的局域网，外部通过ADSL专线与Internet相连。由于目前已经有了域控制器，因此只需要添加1台网站发布服务器和1台数据库服务器就可以了。由于“网上书城”规模不大，采用中型服务器发布网站、采用小型服务器备份数据就可以达到要求，如果日后需要扩容，只需要升级服务器就可以改善性能。2. 业务系统制作相对完善的网上售书系统，并且提供案例下载、留言系统、论坛等功能。由于主要针对新东方IT教育学员和在校学生，采用ASP作为服务器脚本语言，SQL server作为数据服务器软件完全可以满足要求。因此开发任务主要集中在ASP脚本的编写和网站静态页面的设计上。3. 系统的标准性新东方IT教育将接手该系统的后期维护工作，这对项目提出了更高的要求系统需要有更强的稳定性、安全性和易维护性，开发时需要为该项目建立更完备的文档管理。4. 系统的拓展潜力系统建设的最终目标是建立一个完整的图书社区。这个过程中，系统必然需要随着业务的扩展不断添加新的功能，因此开发时需要考虑一段时间内的拓展潜力。三、结论该项目是一个标准的、可定制的图书社区平台，这对开发建设单位提出了较高的要求，但在新东方IT教育、开发部门的协作下，在一个时间内，我们有能力完成这项工作，并在以后通过用户的使用使该系统不断的完善。新东方IT教育应用软件教学部2002年10月1日1.1.3项目计划书项目说明书是项目实施前的规划说明文档，供内部使用。内容包括：建设网站目的及功能定位、客户自身条件分析、完成期限、项目进度安排、职责和工作分配、项目规划、项目小组成员组织、项目资料的收集等。建站方式与主要技术首先根据客户需要确定网站的功能，也就是说到底要做哪种类型的网站，进而确定可以采用的网站开发技术。网站有很多种，有商品宣传型、网上营销型、客户服务型、电子商务型等。比如，实例网站主要就是要宣传新东方IT教育系列从书，因此是一个商品宣传型的网站，但同时也需要包括在线售书功能（网上营销）。要实现这些功能有两种渠道，一种是购买IBM、HP等公司提供的企业上网方案、电子商务解决方案，但这种方案一方面成本太高，而且可定制性能受到一定的限制，一般规模不大的网站显然不合适；另外一种就是利用动态网站技术自己开发。目前有很多动态网站技术可以选择，如ASP、JSP、PHP等。由于动态网站一般都需要一个数据库做支持，因此还涉及到数据库软件的选择，目前比较常用的数据库软件有SQL server、Oracle、Mysql等。另外还要根据客户目前的局域网建设情况，确定采用什么样的方式发布网站，也就是考虑是自建服务器还是租用虚拟主机，当然还要选择使用哪种操作系统，UNIX, Linux还是Windows2000/NT。下列表中列出的是常见脚本程序语言、服务器软件以及操作系统的特点。表1-3常用动态服务器程序语言动态语言特点配套使用的操作系统ASP简单易学、易用，但是平台移植性差，只能在Windows操作系统上运行。Windows NT、windows 2000等windows操作系统。JSP平台移植性好，但最好有Java的基础。Windows、Linux、Unix操作系统。PHP能够运行在多种操作平台上，能节省开支但后期维护比较麻烦。Windows、Linux等操作系统。表1-4常用数据库服务器软件一览表数据库类型特点AccessOffice的套件之一。简单易学，操作方便，但安全性不高。SQL server可用于大中型网站数据库操作平台，简单易行，是中小型公司的首选。Oracle大型数据库系统，安全性很高，可以定制，但售价很高，一般用于金融系统。MySQL免费是最大的特色，在网上用的也不少，但功能上有一些缺陷，安全性不是很高。就本例而言，新东方IT教育网上书城主要用来做丛书宣传，访问量不是很高（低于10000人/天），而且安全性能要求也不是很高，因此采用技术比较成熟的ASP能节省开发费用，但由于ASP必须运行于Window2000/NT，因此必须建立windows2000/NT服务器系统发布网站。开发软件除了操作系统、数据库服务软件以外，还要选择网页制作方面的软件。网页制作主要包括网页排版、网页图形设计和图像处理、多媒体开发三大领域。这方面的软件非常多，下面是非常典型的网页制作软件的特点和评价。表1-6网页排版软件软件名称特点评价DreamWeaver MXDreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的网页编辑器。用它制作的网页代码精炼、跨平台性好、可以自动生成Javescript脚本语句。它成功地整合了电子商务功能，不需要通过浏览器就能预览动态网页。Dreamweaver、Fireworks、Flash之间可以良好协作，它们一起被称为"网页三剑客"。专业、实用。既可制作页面也可用于动态编程。Visual Interdev可以实现ASP脚本的自动添加，与VB、VC的使用方式有些相似，缺点是产生的代码不是很规范。适合熟悉VB、VC的程序员使用。表1-7网页图像处理软件简介软件名称特点PhotoShop 6.0能进行很精细的位图处理，是平面设计中不可缺少的软件。但是它的矢量图功能比较差，在制作图标等矢量对象时还需要借助Illustrator来完成。Fireworks MX它是专门针对网页设计的绘图软件，将矢量图和位图的功能融合在一起，而且完善的切片和优化导出功能使得它在专业的网站开发领域占据着不可替代的地位。表1-8多媒体软件简介软件名称特点Flash MXMacromedia Flash是Flash动画专业的创作工具。无论是创建动画图标、Web 站点导航、动画片头或者完整的 Flash Web 站点，Flash 的强大功能都能帮您实现。另外，由于actionscript的引入使得在动画上添加Web应用程序成为可能。LivemotionAdobe Livemotion是一个和Flash功能上差不多的工具，但由于在国内出现的比较晚，很少有人在使用。它是一款针对平面设计师的动画处理软件。Ulead COOL 360Ulead COOL 360是用来全景动画的专业制作软件，利用它我们可以很轻松的创建出360全景演示场景。到目前为止，Macromedia studio MX版本已经逐渐普及，这个版本对于我们开发一个专业的商务网站来说完全可以胜任。事实上，在业内有90%以上的网页制作人员正在用它或者以往的版本制作网站。项目进度计划项目进度计划需要给出比较细致的开发进度，主要说明在什么时候完成了哪些工作。下表是实例的开发进度计划概要。表1-9新东方IT教育网上书城项目进度计划概要工作内容开始时间截止时间1、网站策划（用户调研、需求分析、系统规划设计）2002/10/72002/10/152、人员组织2002/10/72002/10/153、形象设计(图标、广告条、关键页面草图)2002/10/152002/12/254、动态编程（应用系统开发）2002/10/252002/11/255、测试发布2002/11/252002/11/307、系统文档编写整理2002/11/302002/12/58、汇报验收2002/12/109、宣传与维护（系统试用期）2002/12/102003/3/1010、项目总结2003/3/11这个时间表和正式合同的时间一般会有一些差别，因为有可能会出现一些意外情况耽误项目的进程，因此签合同时一般需要多出一个月给自己做缓冲。项目预算项目预算要将开发中可能出现的开支以及系统搭建所需的所有费用详细列出，给出完整的清单。清单主要包括硬件开支、软件开支、工资开支、日常开支等内容。其中硬件开支主要包括网站发布服务器、数据备份服务器、防火墙硬件、其他网络硬件等所需开支；软件开支主要包括操作系统、硬盘备份软件、杀毒软件等项开支；工资开支主要是指员工的正常工资和奖金，涉及到的人员主要有项目主管、网站策划、美工、网页制作、程序员等；最后还有一项就是日常开支，主要包括午餐、办公用品、相关活动的开支等。风险计划简单的说就是设计一份出现意外情况时的应急办法清单。基本上就是确定出现什么意外之后应该怎么办。这里的风险主要是指网站开发过程中的可能出现的风险。1.1.4方案书方案书与计划书不同，它是提交给客户的资料，因此你必须考虑到双方的利益问题。标书一定要讲清用户最感兴趣的内容，如能实现的功能、采用的技术、各项开发费用等，必须让用户相信你有实力也有充足的准备，否则他就会将“绣球”丢向你的对手。具体来讲，一个完整的方案书需要包括网站主要功能、硬件软件系统环境、软硬件报价表、开发周期表和开发费用明细表等内容。方案书还应附有开发中的各项费用开支清单以及开发日程详细安排等内容，这样可以让客户心中有数，给顺利签订合同打下坚实的基础。1.1.5签订开发合同如果客户对你给出的开发计划比较满意，就会和你签订一个技术开发合同，合同需要将网站建设目的、详细功能要求、费用及支付方式等列举出来，下面是比较规范的项目开发技术合同。“新东方IT 教育网上书城”开发技术合同合同编号：XDFIT-2002-10项目名称：新东方IT 教育网上书城甲方：新东方IT教育乙方：应用软件教学部一、建设目的：新东方IT教育开发建设新东方IT教育网上书城的目的是宣传新东方IT教育系列丛书，更好的为学员服务，进而扩大企业知名度。根据这个目的，合作双方设计并制定了网站的各个模块以及要实现的功能。二、前台设计（一）首页设计首页要有清晰的导航，每个次级页面左侧导航及相关内容不同，均有不同的风格，但在同一分类下风格统一。静态网页设计需要有三个方案，方案须经甲方同意才能继续完成动态编程部分。（二）公司简介及新东方系列丛书介绍公司简介需要包含新东方IT教育、组织机构、公司文化、发展历程、网站简介、联系我们、客户留言。（二）动态信息发布模块要求有以下互动信息的实时发布栏目(包括文字、图片、图表、数字等)：新闻、经营信息、调查结果发布、行业动态、人才信息。（三）会员管理模块对会员进行不同权限的划分，分为三类：访客、注册用户、新东方学员。（四）商品销售模块最新图书信息、热点图书信息、新书预告、本月排行。用户可以在线提交订单，查询图书，察看图书相关信息。商品信息包括编号、名称、规格、价格、出版社、作者、详细说明、图书封面、备注等内容。能实现商品的搜索，可以按照关键字进行检索；（五）商品服务模块案例下载、原创交流、技术论坛、客户反馈。（六）市场调查和分析模块管理员可以使用界面实现市场调查表单内容的修改；对客户的意见进行统计分析。（七）客户反馈模块访问者可以填写反馈信息，而且将访问者的信息放在页面上显示。为了保证安全性，访问者的联系方式等涉及私人秘密的信息不在页面上显示。三、后台设计（一）分级管理能实现分级管理，管理员分为超级管理员、普通管理员、会员三个等级，分别享有不同的权限。（二）动态信息管理可以按类别发布信息，能实现关键字检索。（三）商品管理模块可以手动将某一项商品变为“畅销商品”，并在“热点图书”栏目中显示出来。在每个大类下，可以动态添加、删除、编辑商品小类，可以添加、修改、删除任何一种商品的信息。（四）会员管理模块会员可以修改个人资料，而管理员可以修改、删除、增加一个新的用户。（五）市场调查及分析模块对前台提交的调查问卷进行分析归总。（六）用户反馈模块对用户提交的反馈信息进行归纳分析，具有回复、归纳、查询、删除留言等功能。（七）网站访问统计系统对用户提交的反馈信息进行归纳分析，恢复帖子。四、项目内容及相关费用(单位：人民币/元)网站开发费用如表1-3所示。表1：网站页面及页面制作费用序号项目单价数量1欢迎屏（包含Flash）1000元/页3套2首页800元/页3套3栏目页400元/页3套4终极页100元/页3套5Flash动画广告500元/秒3套小计： 8000.00元表2：网站数据库程序设计费用序号项目规格1动态信息发布系统按照方案实施2商品管理系统按照方案实施3会员管理系统按照方案实施4客户反馈系统按照方案实施5网站访问统计按照方案实施6市场调查和统计按照方案实施小计：15000.00元网站开发所需硬件和软件全部由新东方IT教育。网站开发总费用为23，000元整，开发前先预付5000元整，项目测试完成验收后由甲方支付剩余的18000元整。五、开发周期网站从2002年10月10日开始，2002/1/10完工。2002/1/10至2002/4/10为网站调试阶段，届时由乙方负责调试好站点并由甲方监督测试。网站建设期间甲方能通过网站看到网站的建设情况和进度。六、其他依据合同双方约定，乙方有责任根据甲方要求提出修改的要求进行调整。但一旦设计方案正式确定之后，甲方将不再有大幅度调整网站结构的权利。如有未写明的要求，应以实现网站功能为标准。甲方：代表签字（盖章）：时间：2002年9月30日乙方：代表签字（盖章）：时间：2002年9月30日1.2网站项目策划合同签下来了，还有很多的事情要做。项目正式开发之前最重要的就是项目策划。项目策划包括网站结构的设计、模块功能设计、书写项目策划报告等内容。1.2.1网站结构设计网站结构的确定和整个网站的主要开发目的紧密相关，比如“新东方IT教育网上书城”这个项目既要介绍实现网上购物，又要宣传公司形象，因此设计需要从这两个方面去着手。由于需要宣传公司和丛书，因此至少包括公司简介、丛书介绍、服务内容、联系方式等信息；另外由于要实现网上购物功能，因此需要提供会员注册、详细的价格信息、在线购物、商品服务信息、搜索查询、定单确认、付款方式、帮助系统等基本内容。网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信息不会吸引匆匆浏览的访客。可事先对人们希望阅读的信息进行调查，并在网站发布后调查人们对网站内容的满意度，以及时调整网站内容。设计的结果最重要的就是网站结构示意图。在这张示意图中，必须将网站重要表达的内容非常清晰的表达出来。表1-11网站结构示意图网站结构示意图前台部分后台管理部分1.2.2模块功能设计模块功能设计实际上就是将每个功能进行深入研究分析，明确应当完成的所有工作。然后制定出详细的开发计划以及人员组织计划。1.2.3项目策划报告项目策划报告是提交给项目决策人员（如老板、部门经理）的重要材料，他们将会根据客户要求对计划书的内容提出修改意见，确定后正式实施。1.3网站开发人员组织项目开发人员的多少和比例要根据实际项目来决定，一般控制在5-7人。组建项目团队时根据网站规模确定需要哪些职位，然后选择合适人员组成。人员最好都有相关项目的开发经验，技术上一定要过硬，因为任何一个环节上浪费了时间都可能导致项目如发如期完成。一般开发人员至少需要项目主管、网站策划、内容编辑、美术设计、网页制作、网站程序员,另外还需要公司里的系统管理员、网络工程师、质量测试、法律顾问、文档管理等人协助。当然小的开发公司一个人往往需要身兼数职，比如内容编辑、美术设计、网页制作甚至网站程序员都可能有一人完成。当然这样能节省一些开支，但必然会延长开发周期，而且项目质量也难以保证。表1-12网站开发人员职责职位一览表人员职位主要职责能力要求项目主管负责项目的管理和协调，合理分配和使用资源，保证项目按计划顺利进行。具体工作包括参与决策、召集开发人员、审查开发文档、协调开发进度、汇报开发进展、书写宏观技术文档以及项目总结等。要求对市场、人力资源、开发成员的特点、开发项目所需资金、开发周期、各部分技术等各方面都有着全面的认识，而且要求表达沟通能力好、能够任劳任怨、在关键时刻能起到精神领袖的作用。网站策划对网站结构和内容进行设计和组合，和软件开发中的系统分析员有些类似。书写网站策划文档。对客户需求有很深的理解，能准确把握整个项目全部内容。内容编辑负责收集整理资料。要求知识面很广、具备很强的写作能力，能迅速收集大量有用数据、资料，对网站内容要求有着深刻的理解。美术设计主要负责标志、广告条、色彩以及关键页面草图的设计。书写网站形象说明书。必须熟练掌握Adobe Photoshop或Macromedia Fireworks等专业绘图软件，有较高的艺术修养和丰富的设计制作经验。网页制作按照美术设计的方案制作网站效果图和页面，需要时制作各种动画（如Flash、虚拟现实动画等）；书写网站文件管理技术文档。能熟练运用专业网站制作软件（Dreamweaver、Fireworks、Flash 等）、了解Asp编程，能设计美观实用的网站界面。网站程序员网站程序员主要是指负责与Web相关的基于网络数据库系统与应用软件开发的工程；书写网站后台管理技术文档。目前一般要求会使用ASP、JSP、PHP中的一种，能熟练使用一种网页制作工具（如Dreamweaver）。系统管理员也就是 “网管”，负责发布Web站点，配置数据库服务器等，保证网络安全。要求熟悉网络基础知识，熟练掌握多种操作系统，能配置服务器软件、数据库软件，进行网站的管理和页面内容的更新。网络工程师主要负责局域网络的组建与维护。要求熟悉网络技术、安全协议、路由与交换技术，对网络的设备进行维护与管理。其他人员需要时安排人员担任质量测试、法律顾问、文档管理。由于这些人员的工作时间一般不会同时进行，因此有很大一部分可以在需要时从其他部门抽调过来。比如，在项目策划阶段一般只需要项目策划和项目主管参与就可以了；当正式进行静态页面设计时，就需要将内容编辑、美术设计、网页制作请过来，这是项目策划就可以去参加其他项目的策划；当静态页面完成后，美术设计就可以离开参加其他项目的设计了，而网站程序员又可以从其他部门抽调过来。另外，像系统管理员、网络工程师、质量测试、法律顾问、文档管理等一般公司只有一位，需要时可以请他们帮助项目组完成一些配套的工作。图1-3是每个流程所需要的人员示意图。图1-3每个流程所需人员示意图所有人员的调动都和公司的人事部门紧密相关，与他们之间的沟通是项目主管的重要工作之一。项目主管必须和人事部门确定好用人时间，并出具开发时间表。确定人员之前，项目主管还必须了解人事部门推荐人员的特点，从中筛选最合适的人才作为项目开发组成员。人员的确定必须在项目正式开发前进行，临时找人绝对不是一个好方式，这样很难保证开发进度和商品质量。如果不是专业的开发公司，就必须从公司外找一部分人来做，当然这样一来风险也就增大了。1.4项目开发规范要制定项目开发规范，由两个方面的原因：一是为了方便交接，二是为了减少错误。因为开发项目时，不是任何时候所有的开发人员都在一起，任务交接就成了一个大问题。比如说静态网页制作完成后，网页制作就需要将所有的静态页面交给程序员，这时就需要告诉程序员那些文件主要包含什么内容。如果网页制作人员给文件目录和文件命名时是按照指定的规范命名的，那么程序员就只需要阅读一下文件目录命名规范就可以很轻松得找到自己想要的文件，相反就需要一个个的打开文件察看内容，这样必然会浪费很多时间。更加严重的是，这样会使得合作非常不愉快，导致开发小组不团结。另外，网站分工的深入以及网络业的逐渐成熟，很多行业标准提了出来。比如网站广告条的尺寸、层叠样式表的使用等都有了一套比较规范的要求。项目开发规范由项目主管结合开发小组其他成员的意见书写，要求尽可能的细致。主要包括：目录文件命名规范、网站Logo的设计规范、广告Banner的尺寸规范、字体使用规范、CSS书写规范、网页HTML代码书写规范、数据库设计规范等。1.4.1目录文件命名规范除了上面提到的任务交接的原因，网站管理员和开发小组之间的项目交接也是一个重要原因。由于往往不属于一家公司，交流起来就比较麻烦，如果没有遵循一定的开发规范，就会给后期网站的管理造成很多麻烦，甚至造成巨大经济损失。为了减少这些麻烦，文件命名规范在开始前就要制定好。详细内容请参阅第七章 网站目录结构的确定。1.4.2网站Logo的设计规范网站图标（logo）是整个网站的视觉中心，也是整个网站内涵的集中体现。如何让logo看着美观大方，又能体现公司文化和行业特点，使设计师不可回避的问题。本书也给出了一些网站图标的设计思路，详细内容请参阅第三章 网站图标的制作。1.4.3广告Banner的尺寸规范网站建立起来后，往往需要在一些大网站上打广告，这样就需要制作广告Banner。另外由于需要在其他网站上显示广告条，还需要考虑大小问题。作为网络广告提供商，他们一方面要保证你的Banner的显示效果，另一方面也不希望你的广告放上去后影响到他们网站风格的统一。为了解决这个矛盾，广告提供商一般按照标准大小预留广告条位置。由于预留位置已经固定，因此我们在制作广告条时如果做得太大或者太小就会发生变形，变得很难看，因此必须遵循网上通用的尺寸规范制作各种类型的广告条，图1-4是最常见的468*60像素的广告条。图1-4 468×60广告条关于广告条的制作请参阅第四章 网站广告条的制作。1.4.4字体使用规范文字的使用非常广泛，标题、正文、装饰图片都要用到文字。文字到底有哪些字体、应该选用什么样的字库、在某个具体情况下应该用什么样的字体，这些都是困扰设计师的问题，这部分内容请参阅第三章 网站图标的制作。1.4.5色彩管理规范网站中无论是图片还是普通文本，都涉及到大量的色彩信息。如何管理这些信息以往是一件很复杂的工作，但在有了Macromedia studio MX之后，这些工作就比较轻松了。详细内容请参阅第六章 网站效果图的制作。1.4.6 CSS样式表书写规范CSS样式表包含了几乎所有的页面样式信息，利用它可以控制整个网站的风格。因此，一个规范的容易操作的样式表显然是十分重要的。如何让样式表尽可能的精炼、修改网站风格时工作量最小就成了一门很深的学问。详细内容请参阅第七章 使用CSS确定网站风格。1.4.7网页HTML代码书写规范HTML代码对于静态网页制作的人员来说已经不是什么问题了，因为除了少量的Javascript脚本之外，几乎所有的静态页面都可以用Macromedia MX制作出来。但是，对程序员来讲，不规范的HTML代码是致命的，因为他们需要找到插入动态服务器脚本的具体位置，垃圾代码往往会消耗他们非常多的时间。下面是两种显示效果完全一样但代码书写格式不同的两段代码。<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>欢迎访问新东方IT教育网上书城:.</title><link href="style/index.css" rel="stylesheet" type="text/css"></head><body>欢迎访问新东方IT教育网上书城</body></html>这样的代码看起来是不是很清楚？<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>欢迎访问新东方IT教育网上书城:.</title><link href="style/index.css" rel="stylesheet" type="text/css"></head><body>欢迎访问新东方IT教育网上书城:.</body></html>这样的代码看起来累吗？这两段代码显示的效果是完全一样的，但是给程序员的感觉是完全不一样的。如果所有的页面都是很不规范的代码，就会让程序员变得非常烦躁，严重影响开发情绪，进而波及到整个开发小组。幸运的是，Macromedia Dreamweaver对HTML代码的生成实行了严格的控制。如果你避免了一些错误的操作，就完全可以避免垃圾代码的产生。而且，Dreamweaver还提供了清除垃圾代码的功能。另外作为一个专业的网站，往往需要在网页代码中添加一些特殊的代码，如版权信息、搜索关键字、网站描述信息等。这些都可以通过Dreamweaver可视化工具添加到HTML源代码当中。详细内容请参阅第十七章 网站测试及常见问题。1.4.10数据库设计规范数据库是整个网站的核心，它能否高效率的输入输出数据，将决定着动态网站的反应速度。因此创建一个结构清晰完整、重复数据量小、垃圾数据少的数据库就成为网站创建过程中很重要的一环。1.4.11 ASP代码书写规范ASP虽然使用起来比较简单，但是它的功能已经比较完善，如果使用不当，给不法分子留下了空当，就可能会出现很多问题。而且ASP代码中涉及很多函数、变量，如何给他们合理的命名也是一个不容忽视的问题。1.5网站形象设计“爱美之心人皆有之”，网站做得不漂亮，要想在众多网站中脱颖而出恐怕是难于上青天。网站外观的好坏不仅影响到浏览者的回头率，更重要的是直接影响到公司的形象。由于目前电子商务还没有真正被大多数人所接受，很多人还持有怀疑态度，即使你的公司实力很强，但如果你的网站做的就像个不入流的个人网站，我想浏览者无论如何是不会去下订单的。原因很简单，一句话：我不信任你。好的外观可以给浏览者带来好的心情。在舒适、优雅的氛围中，浏览者会很自然的去浏览你的网站，进而将商品放进“购物车”。1.5.1收集资料站点开发所需要的资料主要由客户提供，如果不足可以由网站编辑负责收集整理。这些资料包括照片、文字等。收集时一般先收集有关客户的资料，如是否有公司图标、公司经营情况、代表性商品等，因为美术设计的工作必须建立于这些素材之上。随后网站编辑需要收集各种商品的信息，并将这些数据分门别类的录入商品数据库。在建立商品数据库时，由于采集商品照片的工作量很大，而照片的多少对开发进度并没有太大的影响，因此一般放在最后去收集。除了收集工作之外，网站编辑还需要编写网站帮助系统和管理员使用手册。具体的工作责任和流程如图1-5所示。图1-5 网站编辑工作流程1.5.2构思草图根据基本内容设计出页面的基本框架，应当尽可能的细化。图1-6是实例中首页和“关于我们”两个栏目页面的结构草图。这样的草图可以用铅笔直接在纸上去画，也可以用Fireworks在计算机上去画。我一般习惯于用计算机，因为修改起来很方便，可以节省大量的时间。图1-6首页结构草图1.5.3美术设计页面设计当中有两个关键点，一个是网站图标，另一个是网站广告条。另外为了使页面更加美观，需要制作一些装饰性的图片，这部分主要由美工去完成。网站logo当开发规范和开发思路明确之后，就要开始设计网站了。首先由美工设计出网站的图标（logo）。标志的设计是整个网站的关键，它体现了一个公司的形象和文化底蕴，也是整个网站中使用频率最高的对象，因此标志设计的好坏直接关系到网站的形象。如图1-7和1-8是新东方学校、新东方IT教育的图标。图1-7 新东方学校图标图1-8新东方IT教育图标图标设计需要注意很多方面的问题，图标的字体、颜色、大小都是设计师必须要考虑的问题。标志的设计主要分为构思、绘制草图、具体制作、优化输出等步骤。详细内容请参阅第三章 网站图标的制作。广告Banner广告条（banner）是推广网站和商品有力的工具。商业网站一般都会在页面顶部最醒目的位置上放置一个广告条用来宣传自己的商品。广告条一般都采用GIF动画，现在逐渐开始向Flash动画过渡，具体采用什么形式，可以根据广告条的复杂程度以及访问人群来决定。如果动画情节很简单，可以采用GIF的格式，这样的动画完全可以用Fireworks来完成。由于Fireworks既可以制作图形、处理图像，又可以制作简单动画，文件无需重复导入和导出，因此用Fireworks来制作简单Banner动画是最理想的选择。这部分详细内容请参阅第四章 网站广告条的制作。图1-9 网上GIF格式的广告条相反，如果需要制作很复杂的动画，用GIF格式文件体积会很大，影响下载速度，这时可以考虑使用Flash动画文件格式，如图1-10所示就是Flash动画的一帧。它可以使文件体积很小，但是必须保证访问者的浏览器安装了flash播放器的插件。这部分内容请参阅第十四章 网站宣传动画的制作。图1-11比较复杂的动画一般采用Flash格式装饰性图片只有文字、广告条、图标的页面多少会显得比较单薄，为了页面的美观，一般需要在页面中添加一些装饰性图片。比如将重要的内容如标题等用图片装饰起来，用图片填充空白区域等。这些图片都可以在Fireworks中制作出来，具体方法请参阅第五章 装饰性图片的制作。页面效果图当图标和广告条设计好后，基本上网站的基调就定下来了。这时我们可以根据策划时绘制的关键页草图用Fireworks制作出关键页面的效果图。这里说的关键页面指的是网站首页和第一级栏目页面。这里你需要认真考虑的是如何美化网页的每个部分，并且保证整个页面看起来很完美和谐。也就是需要决定采用什么样的版式结构，采用什么样的配色等内容。这是整个网站开发中最难的部分。一般比较大的项目，客户都要求制作单位拿出2-3套前台设计方案，也就是必须有2-3套效果图。效果图完成后，由项目主管把效果图交给客户审查，经客户签字认可后开始页面的制作。具体方法请参阅第六章 网站效果图的制作。1.5.4静态网页制作组织网站的目录结构根据网站策划过程中确定的功能结构图，你需要决定建哪些一级栏目，每个栏目下还要不要分第二级栏目，二级栏目是否还要细分，每个栏目中应该有什么文件，每个文件里面具体应当有些什么内容，这些都应当事先规划好。组织目录结构实际操作起来很简单，就是在站点中添加很多的文件夹，分别放上不同的文件。目录结构确定时一定要保证结构清晰、完整，方便查找文件。图1-12所示是实例网站的目录结构。图1-12“新东方IT教育网上书城”网站目录结构设计样页这部分工作主要用Dreamweaver来完成，利用Dreamweaver我们可以完成这样几项重要的工作：1、版式结构的实现；2、图文的混排；3、网站风格的确定确定CSS样式表；4、网页动态特效的添加；针对不同网站，需要采用不同的版式，而表格是控制页面布局最好的工具，关于表格的使用请参阅第八章 表格的使用。动态特效用表格排好的页面中有了文字、图片或者flash动画，但有时候为了使页面有生气，还希望加上一些动态特效，比如想在页面中显示当前日期、图像的替换翻转、下拉菜单等。要做出这样的特效，我们需要在网页的代码中加入一些脚本语言，一般我们采用Javascript。利用这些脚本，可以将网页变得更加生动活泼。但在dreamweaver中，我们一般不需要手写Javascr