Transcript Document
第3章 电子商务网站内容设计 【本章导读】 本章对电子商务网站的内容设计进行了详细的介绍：第一节首 先介绍使用那些方法对网站进行合理的需求分析；第二节从主题 和功能两个方面对网站的定位进行深入的探讨；第三节主要介绍 网站的内容规划，包括网站的总体结构设计和常用模块；最后两 节分别从网站建设所涉及的技术支持和进度规划等进行介绍。 【本章要点】 需求分析基本内容及方法 主题、功能定位 结构设计、模块设计 网络平台、服务支撑体系 数据库设计、网站安全 网站建设进度规划 3.1网站设计的原则 3.2网站设计风格和创意 3.3页面内容设计 3.4设计中的默认规范 3.5网站设计常见错误 本章小结 3.1网站设计的原则 （1）明确建立网站的目标和用户需求 Web站点的设计是展现企业形象、介绍产品和服 务、体现企业发展战略的重要途径，因此必须明确设 计站点的目的和用户需求，从而做出切实可行的设计 计划。要根据消费者的需求、市场的状况、企业自身 的情况等进行综合分析，牢记以“消费者 （customer)”为中心，而不是以“美术”为中心进 行设计规划。在设计规划之初重点考虑：建设网站的 目的是什么？为谁提供服务和产品？企业能提供什么 样的产品和服务？网站的目的消费者和受众的特点是 什么？企业产品和服务适合什么样的表现方式（风 格）？ （2）总体设计方案要求主题鲜明 在目标明确的基础上，完成网站的构思创意即总体设计方案。 对网站的整体风格和特色作出定位，规划网站的组织结构。Web站 点应针对所服务对象（机构或人）的不同而具有不同的形式。有 些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供 华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音 和录像片段。好的Web站点把图形表现手法和有效的组织与通信结 合起来。要做到主题鲜明突出，要点明确，以简单明确的语言和 画面体现站点的主题。调动一切手段充分表现网站点的个性和情 趣，办出网站的特点。 Web站点主页应具备的基本成分包括：页头，用于准确无误地 标识你的站点和企业标志； Email地址，用来接收用户垂询；联 系信息，如普通邮件地址或电话；版权信息，用于声明版权所有 者等。注意重复利用已有信息，如客户手册、公共关系文档、技 术手册和数据库等可以轻而易举地用到企业的Web站点中。 （3）网站的版式设计 网页设计作为一种视觉语言，要讲究编排和布局，虽 然主页的设计不等同于平面设计，但它们有许多相近 之处，应充分加以利用和借鉴。版式设计通过文字图 形的空间组合，表达出和谐与美。一个优秀的网页设 计者也应该知道哪一段文字、图形该落于何处，才能 使整个网页生辉。多页面站点页面的编排设计要求把 页面之间的有机联系反映出来，特别要处理好页面之 间和页面内的秩序与内容的关系。为了达到最佳的视 觉表现效果，应讲究整体布局的合理性，使浏览者有 一个流畅的视觉体验。 （4）色彩在网页设计中的作用 色彩是艺术表现的要素之一。在网页设计中，根据和谐、均衡和 重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页 面。根据色彩对人们心理的影响，合理地加以运用。按照色彩的 记忆性原则，一般暖色较冷色的记忆性强；色彩还具有联想与象 征的物质，如红色象征血、太阳；蓝色象征大海、天空和水面 等。所以设计出售冷食的虚拟店面，应使用淡雅而沉静的颜色， 使人心理上感觉凉爽一些。网页的颜色应用并没有数量的限制， 但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格 的要求定出一至二种主色调，有CIS（企业形象识别系统）的更应 该按照其中的VI进行色彩运用。 在色彩的运用过程中，还应注意的一个问题是：由于国家和种 族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异 等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜 欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色； 生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢 绿色。在设计中要考虑主要读者群的背景和构成。 （5）网页形式与内容相统一 要将丰富的意义和多样的形式组织成统一的页面结 构，形式语言必须符合页面的内容，体现内容的丰富 含义。 运用对比与调和、对称与平衡、节奏与韵律 以及留白等手段，通过空间、文字、图形之间的相互 关系建立整体的均衡状态，产生和谐的美感。如对称 原则在页面设计中，它的均衡有时会使页面显得呆 板，但如果加入一些富有动感的文字、图案，或采用 夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素，要使用点、 线、面的互相穿插、互相衬托、互相补充构成最佳的 页面效果。网页设计中点、线、面的运用并不是孤立 的，很多时候都需要将它们结合起来，表达完美的设 计意境。 （6）三维空间的构成和虚拟现实 网络上的三维空间是一个假想空间，这种空间关系需借助动静变 化、图像的比例关系等空间因素表现出来。在页面中，图片、文 字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。 图片、文字前后叠压所构成的空间层次目前还不多见，网上更多 的是一些设计比较规范、简明的页面，这种叠压排列能产生强节 奏的空间层次，视觉效果强烈。网页上常见的是页面上、下、左、 右、中位置所产生的空间关系，以及疏密的位置关系所产生的空 间层次，这两种位置关系使产生的空间层次富有弹性，同时也让 人产生轻松或紧迫的心理感受。现在，人们已不满足于HTML语言 编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现 实要在Web网上展示其迷人的风采，于是VRML语言出现了。VRML是 一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也 是一种基于文本的语言，并可以运行在多种平台之上，只不过能 够更多地为虚拟现实环境服务。 （7）多媒体功能的利用 网络资源的优势之一是多媒体功能。要吸引浏 览者注意力，页面的内容可以用三维动画、 FLASH等来表现。但要注意，由于网络带宽的 限制，在使用多媒体的形式表现网页的内容时 应考虑客户端的传输速度。 （8）网站测试和改进 网站测试实际上是模拟用户询问网站的过程， 用以发现问题并改进设计。要注意让用户参与 网站测试。 （9）内容更新与沟通 企业Web站点建立后，要不断更新内容。站点信息的不断更新， 让浏览者了解企业的发展动态和网上职务等，同时也会帮助企业 建立良好的好象。在企业的Web站点上，要认真回复用户的电子 邮件和传统的联系方式如信件、电话垂询和传真，做到有问必 答。最好将用户的用意进行分类，如售前一般了解售后服务等， 由相关部门处理，使网站访问者感受到企业的真实存在并由此产 生信任感。注意不要许诺你实现不了的东西，在你真正有能力处 理回复之前，不要恳求用户输入信息或罗列一大堆自己不能及时 答复的电话号码。如果要求访问者自愿提供其个人信息，应公布 并认真履行个人隐私保承诺。 （10）合理运用新技术 新的网页制作技术几乎每天都会出现，如果不是介绍网络技术的 专业站点，一定要合理地运用网页制作的新技术，切忌将网站变 为一个制作网页的技术展台，永远记住用户方便快捷地得到所需 要的信息是最重要的。 对于网站设计者来说，必须学习跟踪掌 握网页设计的新技术如Java、DHTML、XML等，根据网站的内容和 形式的需要合理地应用到设计中。 3.2 网站设计风格和创意 3.2.1 网站总体风格 应该如何树立网站风格呢？可以分这样几 个步骤实施： （1）确信风格是建立在有价值内容之上的。 一个网站有风格而没有内容，就好比绣花枕头。 首先必须保证内容的质量和价值性，这是最基 本的，无须置疑。 （2）要弄清楚自己希望站点给浏览者的印象是怎么样的，可以从 这几方面来理清思路： 如果只用一句话来描述你的站点，应该是：有创意，专业，有实 力，有美感，有冲击力。 想到你的站点，可以联想到的色彩是：热情的红色，幻想的天兰 色，聪明的金黄色。 想到你的站点，可以联想到的画面是：一份早报，一辆法拉利跑 车，人群拥挤的广场，杂货店。 如果网站是一个人，他拥有的个性是：思想成熟的中年人，狂野 奔放的牛仔，自信憨厚的创业者。 浏览者觉得你和其他网站的不同是：可以信赖，信息最快，交流 方便。 浏览者和你交流合作的感受是：师生，同事，朋友，长幼。 通过这样一份调查，经统计后的结果会告诉你：你网站现在的差 距、弱点及需要改进的地方。 （3）在明确自己的网站印象后，开始努力建 立和加强这种印象。经过第二步印象的“量 化”后，你需要进一步找出其中最有特色特点 的东西，就是最能体现网站风格的东西，并以 它作为网站的特色加以重点强化，宣传。例 如：再次审查网站名称、域名、栏目名称是否 符合这种个性，是否易记；审查网站标准色彩 是否容易联想这种特色，是否能体现网站的性 格等等；具体的做法没有定式，下面仅提供一 些参考： 将网站的标志logo，尽可能的出现在每个页面上。或者页眉，或 者页脚，或则背景。 突出网站的标准色彩。文字的链接色彩，图片的主色彩，背景 色，边框等色彩尽量使用与标准色彩一致的色彩。 突出网站的标准字体。在关键的标题、菜单、图片里使用统一的 标准字体。 使用统一的语气和人称。即使是多个人合作维护，也要让读者觉 得是同一个人写的。 使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊 度都必须一样。 使用自己设计的花边、线条、点。 展示网站的荣誉和成功作品。 风格的形成不是一次定位的，只有在实践中不断的强化、调整、 修饰，才会逐渐的形成自己独特的，而又被大众所接受的风格。 3.2.2 网站的创意设计 创意思考的过程分五阶段： （1）准备期：研究所搜集的资料，根据旧经 验，启发新创意； （2）孵化期：将资料咀嚼消化，使意识自由 发展，任意结合； （3）启示期：意识发展并结合，产生创意； （4）验证期：将产生的创意讨论修正； （5）形成期：设计制作网页，将创意具体化。 3.3 页面内容设计 3.3.1 主页设计 设计一个主页，具体步骤如下： （1）确定主页的功能模块 主页的功能模块是指设计人员需要在主页上实 现的主要内容和功能。一般站点都含有网站名 称（Logo）、广告条（Banner）、主菜单 （Menu）、新闻（News）、搜索（Search）、 友情链接（Links）、邮件列表 （Maillist）、计数器（Count）、版权 （Copyright）等模块。用户也可根据主页设 计的需要选择其中部分模块即可。 （2）设计主页的版面 在功能模块确定后，开始设计主页的版面，如何在一 个页面上编排这些功能模块，以使得主页的整体效果 最好，就全凭网页设计者的创意和想象力了，一般都 需要先勾画草图，修改满意后，然后在网页制作软件 中实现。 （3）处理技术上的细节 在技术上，主页考虑字体的风格、超链接的实现以及 图形、动画与文字的关系等。主页面的大小要适中， 既要表达网站的主题，又要尽量精简，应避免因首页 内容多导致加载时间过长，而给用户不好的印象。 3.3.2 栏目与版面设计 1. 栏目设计 栏目是一个网站的大纲索引，是网页上需要展示的信息，栏目应 该将网站的主体明确显示出来，一般的网站栏目安排要注意以下 几个方面。 （1）紧扣网站主题 通常将主题按一定的方法分类，将它们作为网站的主栏目。主栏 目个数在总栏目中要占绝对优势，这样网站才会显得专业、主题 突出，并且容易给人留下深刻的印象。 （2）设立一个最近更新或网站指南栏目 如果网站的主页没有安排版面放置最近更新的内容消息，就有必 要设置一个“最近更新”栏目，这样做是为了照顾常来的访客， 让网站的主页更加人性化。 如果网站主页的内容庞大，层次较多，而又没有站内搜索，则有 必要设置一个“本站指南”或“内容导航”栏目，这样可以帮助 初访者快速找到他们想要的内容。 （3）设定一个可以双向交流的栏目 双向交流的栏目不需要很多，但一定要有，比如论坛、留言板、 邮件等，可以让浏览者留下他们的信息。有调查表明，提供双向 交流的站点比简单的留一个E-mail信箱更具有亲和力。 （4）设置一个下载或常见问题回答栏目 网络的特点是信息共享，如果你看到一个站点有大量优秀的、有 价值的资料，你肯定希望能一次性下载，而不是一页一页的浏览 保存，如果站点经常收到网友关于某个方面问题的来信，应该设 立一个常见的问题回答的栏目，这样既方便了访问者，也节约了 自己的时间。 至于其他的辅助内容，如关于本站、版权信息等可以不放在主栏 目，以免冲淡主题。在主栏目中尽可能删除与主题无关的栏目， 而将最有价值的内容列在栏目上，以便于访问者浏览和查询。 2. 版面布局 在布局过程中要做到以下几点： （1）主次分明，突出重点：在一个页面上，必然考 虑视觉的中心，这个中心一般在屏幕的中央或者中央 偏上的部位。因此，一些重要的文章和图片一般可以 安排在这个部位，在视觉中心以外的地方就可以安排 那些稍微次要的内容，这样在页面上就突出了重点， 做到主次有别。 （2）图文并茂：文字和图片具有相互补充的视觉关 系，页面上文字太多，就显得沉闷，缺乏生气；页面 上图片太多，缺少文字，比如会减少页面的信息容 量。因此最理想的效果是文字和图片的密切配合，既 能活跃页面，又使主页又丰富的内容。 版面布局的步骤： （1）轮廓设计：一个新的页面可以看成是一张白 纸，设计者可以尽可能的发挥想象力，把你想到的景 象画上去。这属于创造阶段，不讲究细腻工整，也不 考虑细节功能，只需大概的勾画出创意的轮廓即可。 （2）布局设计：在轮廓设计的基础上，将所需要的 各种功能模块安排到页面上，在排放时必须遵循突出 重点、平衡协调的原则，将网站标志、主菜单等最重 要的内容放在最显眼、最突出的位置，然后再考虑次 要模块的摆放。 （3）细节设计：将粗略布局精细化、具体化。 详细介绍几种常用的版面布局形式: （1）“T”形结构布局:是指页面顶部为横条网站标 志加广告条，下方左页面为主菜单，右面显示内容的 布局，因为菜单条背景较深，整体效果类似英文字母 “T”，所以称之为“T”形布局，这是网页设计中用 的最多的一种布局方式。这种布局方式的优点是页面 结构清晰、主次分明，是初学者最容易上手的布局方 法，缺点是规矩呆板。 （2）“口”形布局:这是一个象形的说法，就是页面 一般上下各有一个广告条，左面是主菜单，右面放友 情链接，中间是主要内容，这种布局的优点是可以充 分的利用版面，信息量大，缺点是页面拥挤，不够灵 活。 （3）“国”字形:也可以称为“同”字型，是一些大型网站所喜 欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是 网站的主要内容，左右分列一些小条内容，中间是主要部分，与 左右一起罗列到底，最下面是网站的一些基本信息、联系方式、 版权声明等，这种结构是网上用的最多的一种结构类型。 （4）封面型:这种类型基本是出现在一些网站的首页，大部分为 一些精美的平面设计结合一些小的动画，放上几个简单的链接或 者仅是一个“进入”的链接，甚至直接在主页的图片上做链接而 没有任何的提示。这种类型大部分出现在企业网站和个人主页， 如果处理得好，会给人带来很好的感觉。 版面布局应该加强视觉效果，加强文档的可视度和可读性。 统一的视觉、新鲜和个性是网页布局的最高境界。 3.3.3 美工设计 随着网页制作经验的积累，在选择色彩的时候会有 这样的一个趋势：单色→五彩缤纷→标准色→单色。 一开始因为技术和知识缺乏，只能制作出简单的网页， 色彩单一；在有一定基础和材料后，希望制作一个漂 亮的网页，将自己收集的最好的图片，最满意色彩堆 砌在页面上；但是时间一长，却发现色彩杂乱，没有 个性和风格；第三次重新定位自己的网站，选择好切 合自己的色彩，推出的站点往往比较成功；当最后设 计理念和技术达到顶峰时，则又返朴归真，用单一色 彩甚至非彩色就可以设计出简洁精美的站点。 在为网页选择合适色彩的过程中，应该遵循以下几个 原则： （1）色彩的鲜明性：网页的色彩要鲜艳，容易引人 注目。 （2）色彩的独特性：要有与众不同的色彩，使得大 家对你的印象强烈。 （3）色彩的合适性：即色彩要和你表达的内容气氛 相适合，如用粉色体现女性站点的柔性。 （4）色彩的联想性：不同色彩会产生不同的联想， 蓝色想到天空，黑色想到黑夜，红色想到喜事等，选 择色彩要和你网页的内涵相关联。 在选择网页色彩搭配过程中，还要注意以下几个问题： （1）了解你的网站所要传达的讯息和品牌，选择可以加强这些讯 息的颜色。例如，如果在设计一个强调稳健的金融机构，那么就 要选择冷色系、柔和的颜色，如蓝、灰或绿。在这样的状况下， 如果使用暖色系或活泼的颜色，可能会破坏了该网站品牌。 （2）了解你的读者群。文化差异可能会使色彩产生非预期的反应。 同时，不同地区与不同年龄层对颜色的反应亦会有所不同。年轻 族群一般比较喜欢饱和色，但这样的颜色却引不起高年龄层的兴 趣。 （3）不要使用过多的颜色。除了黑色和白色以外，约选择四到五 个颜色就够了。太多的颜色会导致混淆，也会拉走读者的注意力。 （4）在阅读的部分使用对比色。颜色太接近无法产生足够的对比 效果，也会妨碍观众阅读。白底黑字的阅读效果最好。 （5）用灰阶来测试对比。当你在处理黑色、白色和灰色以外的颜 色的时候，有时候会很难决定每个颜色的相对值。为了要确认你 的色盘能提供足够的对比，你可以建立一个仿真网站，并将它转 换成灰阶即可。 （6）选择颜色要注意时效性。同一个色彩很容易就充斥着整个市 场，且消费者很快的就对流行色彩感到麻木。但就另外一个角度 来看，你可以使用几十年前的流行色彩，引起人们的怀旧之情。 （7）选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建 立功能性的颜色，例如标题和超级链接等。 （8）注意网站色差问题。每一个网站开发人员都知道，即使是网 络通用颜色在跨平台显示的时候都会有些不同。记得要校正你的 gamma值，并在不同的作业平台上测试你的色盘。 3.3.4 导航设计 具体的要求如下： （1）辅助导航：为用户提供一个直观的指示，让用户知道现在所 在网站的位置，每一级位置的名称都得有链接可返回，在每一个 网页都必须包括辅助导航以及左上角的网站LOGO标识。 （2）网站LOGO链接：每一个出现的网站LOGO都要加上回到网站首 页的链接，用户已经习惯了点击网站LOGO作为回到网站首页的方 法。 （3）导航条的位置：主导航条的位置应该在接近顶部或网页左侧 的位置，如果因为内容过多需要子导航时，要让用户容易地分辨 出哪个是主导航条，哪个是某主题的子导航条。 （4）联系信息：进入“联系我们”网页的链接或者直接呈现详细 的联系方式都必须在网站的任何一个网页中可以找到。 （5）导航使用的简单性：导航的使用必须得尽可能的简单，避免 使用下拉或弹出式菜单导航，如果没办法一定得用，那么菜单的 层次不要超过两层。 （6）网页指示：应该让用户知道现在所看的网页是什么和与现在 所看网页的相关网页是什么，例如通过辅助导航“首页 > 新闻频 道 >焦点新闻”里的对所在网页位置的文字说明，同时配合导航 的颜色高亮，可以达到视觉直观指示的效果。 （7）已浏览网页的指示：最简单地可以通过已点击超链后的变 色，如果不在同一网页的超链接网页，可以在其它位置显示用户 已浏览过的内容。 （8）登陆退出口：登陆入口和退出登陆出口要在全网站的每一个 网页都可以找到，让用户进入任一网页都可以登陆和退出。 （9）导航内容明显的区别：导航的目录或主题种类必须得清晰， 不要让用户困惑，而且如果有需要突出主要网页的区域，则应该 与一般网页在视觉上有所区别。 （10）导航的链接必须全是有效链接：无论是一般导 航还是有下拉菜单的导航，里面的所有文字都应该是 有效的链接。 （11）准确的导航文字描述：用户在点击导航链接前 对他们所找的东西有一个大概的了解，链接上的文字 必须能准确描述链接所到达的网页内容。 （12）搜索导航结果：搜索的结果一定不要出现“无 法找到”的结果，这是很让用户失望的，如果无法精 确找出结果，搜索功能应该实现对错字，类似产品或 相关产品给出一个相近的模糊结果。 在网页设计中，为了防止由于疏忽而造成超链接失败， 应在栏目和版面设计中画出超链接的关系，在网页上 传后，逐一测试每一页的每个超链接是否有效，以防 出现失败的超链接。 3.3.5 图像与动画设计 图像在网页中具有画龙点睛的作用，它可以装饰页面， 表现个人的风格和情调。一个纯文字的网页是吸引不 了浏览者的，但如果页面上的图像过多，就会喧宾夺 主，因为图像本身是为主页内容服务的，所以要合理 地使用图像与文字进行搭配。 网页中可以使用的图像可以是GIF、JPEG、BMP、TIFF、 PNG等格式的图像文件，其中使用最多的是GIF和JPEG 两种格式。这两种格式的图像有较高的压缩率，在不 影响图像质量的前提下，可以将图像压缩，而且目前 绝大多数的图像处理软件和文字处理软件以及网页制 作软件都支持这两种格式的图像。一般色彩鲜艳、高 分辨率的图像采用JPEG格式，色彩单调、低分辨率的 采用GIF格式。 当在网页中需要载入一个较大的GIF或JPEG图像文件时，装载速度 可能会很慢。为改善网页的视觉效果，可在载入是设置为隔行扫 描，隔行扫描在显示图像开始看起来非常模糊，接着细节逐渐添 加上去直到图像完全显示出来；也可以将该图像做成一个小的缩 略图，然后将缩略图链接到该图像上，如果用户在查看缩略图 后，有兴趣的话，可以通过点击链接打开该图像。 一个受欢迎的网站总是少不了动画的，与静态的页面相比，动画 更能够吸引访问者的视觉。一个富有创意、制作精美的动画会让 人过目不忘。目前最流行的动画形式就是Flash动画，它的文件非 常小，这样就便于下载，因此不会对网页的浏览造成影响，但是 为了观看Flash动画，在浏览者的计算机必须安装相应的插件才 行。 在选择、制作Flash动画时，应该与网页内容有机的结合起来。在 一些内容比较严肃的主页，要慎用Flash动画，毕竟主页还是要依 靠文字和图像作为主题来传播信息的。 3.4 设计中的默认规范 1. 设计风格 依照网站的定位确定整体的设计风格。 主体框架页面、内容页尽量采用方型结构。禁用长距离的斜线及弧线结 构，可允许小范围内的斜线及弧线。封面页、专题页可不受此限制。 设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧，拐角可 以有曲线变化。拐角块最大不得超过18像素。同一页面弧度尽量保持一 致。 各主要栏目之间要求使用一致的布局，包括一致的页面元素和一致的导 航形式，使用相同的铵钮，相同的顺序。可跟首页有变化。 首页及各级页面都必须带有网站的Logo(建议小于150×54)，并链接到网 站首页。 统一按兼容分辨率800*600设计。为了使显示更友好，建议使用778或者 760 px设计。 网站页面长度建议1屏半到2屏。原则上长度不超过3屏，宽度不超过1屏。 根据用户习惯和网站需要，国内中文网站综合类、门户类网站可设计超 过3屏。 2. 图形设计规范 （1）图片标准尺寸 全尺寸banner为468×60px，半尺寸banner为 234×60px，小logo为88×31px。另外150×68、 120×90，120×60也是标准尺寸，网站logo一 般控制在150×54以内，客户要求或特殊广告 图片可另定尺寸。建议首页存储大小不得超过 150K(包括图片)，其它页面经压缩后不得超过 70K。 （2）图片的分类及命名规则 ☆ 名称分为头尾两部分，用下划线隔开。 ☆ 头部分表示此图片的大类性质，例如广告、标志、菜 单、按钮等。 ☆ 放置在页面顶部的广告、装饰图案等长方形的图片取名 为banner。 ☆ 标志性的图片取名为：logo。 ☆ 在页面上位置不固定并且带有链接的小图片取名为 button。 ☆ 在页面上某一个位置连续出现，性质相同的链接栏目的 图片取名为：menu。 ☆ 装饰用的照片取名：pic。 ☆ 不带链接表示标题的图片取名：title；依照此原则类 推。 ☆ 尾部分用来表示图片的具体含义，如果有类似图片就用 数字区别。 ☆ 小标一定做成透明的。 （3）Banner制作要求 大Banner(468×60Pixel)容量尽量限制 在15K内，格式尽量选用GIF及动态格 式。 帧切换时尽量半静半动。少用满底256 色以上的图像。闪切变化主要体现在文 字上。 广告条的border设为0，并要求加上alt 说明。 （4）图标和图片 图标的制作应简捷、色彩明快，在选用单色图标时应根据本栏目 的色彩进行搭配。 图标存储为GIF格式（个别情况除外），尽量采用16色、填充色或 单色。 图片依情况存成GIF或JPEG格式，原则上色调单一的图片存为GIF 格式，色彩复 杂、层次丰富的存为JPEG格式。 设计时不得用15K以上的图片，如图片过大可以考虑采用图片分割 的办法。 内容图片、导航图片的border设为0，并要求加上alt说明。 普通图片不必加alt说明，但如果有链接要把border设为0。 公用图片或有可能更换的图片不要指定图片的尺寸大小（width, height）。 3. 名称约定 （1）路径/文件名设定： 路径/文件命名时一律采用小写英文字母、数字、下 划线的组合，其中不得包含汉字、空格和特殊字符； 目录的命名请尽量以英文翻译为优先，尽量避免使用 拼音作为目录名称。 （2）路径/文件名称需与栏目菜单名称具有相关性。 （3）各路径下的开始文件，命名为index.*。静态文 件为index.html，动态文件为index.asp， index.aspx，index.php，index.jsp。 （4）文件名中用“_”下划线作为连接符。 （5）如页面文件过长需要拆分，建议多个文 件按顺序依次命名为filename01.*、 filename02.*…。 （6）内容不同但属于同类的，且需定期更新 的页面文件或文本采用：名称缩写＋(年份)＋ 月份＋日期＋序号 ，如= news081508.*。 （7）大流量网站的首页和各栏目首页尽量使 用以html为文件后缀名的静态页面。其他经常 访问的动态页面也建议模拟为静态页面。 4. 目录结构规范 目录建立的原则：以最少的层次提供最清晰简便的访 问结构。 （1）目录命名的规范（参照名称约定）； （2）根目录一般只存放index.html以及其他必须的 系统文件； （3）每个主要栏目建立一个相应的独立目录； （4）根目录下的images用于存放各页面都要使用的 公共图片，子目录下的images目录存放本栏目页面使 用的私有图片； （5）所有JS脚本存放在根目录下的scripts目录或 includes目录； （6）所有CSS文件存放在根目录下style目录； （7）每个语言版本存放于独立的目录。例如：简体 中文gb，英文en； （8）所有flash, avi, ram, quicktime 等多媒体文 件建议存放在根目录下的media目录，如果属于各栏 目下面的媒体文件，分别在该栏目目录下建立media 目录； （9）广告、交换链接、banner等图片保存到adv目录； （10）页面下载、解释时间在56k链接速度下不能超 过40秒（栏目首页、表单页）或20秒（一般页面）。 5. 链接规范 （1）新闻、信息类通常用新开窗口方式打开。 （2）顶部导航、底部导航通常采取在本页打 开，特殊栏目和功能可新开窗口。 （3）链接带下划线为链接通常的默认风格， 顶部导航或特殊位置为了观赏性可用样式表取 消下划线。 （4）链接的颜色可配合主题颜色风格改变， 通常为蓝色、暗蓝色、黑色，但激活后的链接 颜色、鼠标移动其上时的链接颜色要同本身颜 色进行区分。 6. 页面制作规范 （1）色彩规范 根据网站性质，避免在一个页面上有太多的色 彩，活泼但不失稳重，颜色柔和但不乱； 文字的色彩要与页面协调； 即使页面有背景图片，也应该设置背景色，通 常默认设置背景色为白色。 （2）表格 定义表格宽度时使用绝对值（指定像素）； 内嵌最大表格宽度为775pix，align=left（前提在设 定为778pix的框架内）； 页面中从上至下尽量拆分成多个层叠的表格，尽量用 TBODY这个标签可以控制表格分行下载，当表格内容 很大时比较实用，在需要分行下载处加上<body>和 </body>； 表格必须指定（border，cellspacing， cellpadding），图文混排时推荐使用vspace=5 hspace=5； 为加快网页下载速度，最好使用CSS定义类表格样 式。 （3）字体 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px 来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体 12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时， 一般选用11pt和14.7px 的字号比较合适。 大小为9pt时，行距为120%；信息类最终页面采用弹出方式；标题 及正文字体规定为11pt，行距为140%。所有页面字体大小建议不要 超过11pt。 考虑字体大小的兼容性，避免使用size=2的方式定义，尽量使用pt 或px并用css定义。 文字颜色与页面配色协调，不使用与背景色相近的颜色。 非图像设计的字体一律采用windows标准宋体。如果为特殊效果需 做成图，要加粗文字用Bold，不要用Strong。 页面文本不使用下划线方式，也尽量少采用粗体显示。 （4）CSS书写规范 所有的CSS的尽量采用外部调用<LINK href="style/style.css" rel="stylesheet" type="text/css"> 。 代码较长的首页和重要栏目首页可直接内嵌CSS，避 免调用时间太长，使页面未及时调用CSS风格而显得 凌乱。 书写时重定义的最先，伪类其次，自定义最后（其中 a:link a:visited a:hover a:actived要按照顺序 写），便于自己和他人阅读。 （5）JS调用规范 所有的javascript脚本尽量采取外部调用<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>。 （6）首页head区代码规范 head区是指首页HTML代码的<head>和</head>之间的内容，head区必须加 入的标识： 公司版权注释：<!--- The site is designed by yourcompany,Inc 07/2005 ---> ； 网页显示字符集：例如简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">； 繁体中文： <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">； 英语： <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">； 网站简介：<META NAME="DESCRIPTION" CONTENT="网站的简介">； 搜索关键字：<META NAME="keywords" CONTENT="关键字1,关键字 2...">； 网页的css规范：<LINK href="style/style.css" rel="stylesheet" type="text/css">； 网页标题：<title>这里是你的网页标题</title>； 收藏夹图标：<link rel = "Shortcut Icon" href="favicon.ico">。 （7）错误页面规范 所有程序出错页面、找不到的页面不要使用默 认的出错提示，要设计为带网站标识和说明的 个性化的出错提示页面。 （8）所有页面必须均需经过浏览器兼容测 试，通常须支持主流浏览器IE、Firefox。 3.5 网站设计常见错误 （1）将一个页面划分为多个框架 对使用者来说，将一个页面划分为多个框架是 非常不方便的，因为框架破坏了网页的基本界 面，打印输出也会变得麻烦，更糟糕的是，使 用者所进行的操作可能会导致意想不到的结果。 （2）画蛇添足地使用新技术 在网页中使用Flash等需要下载插件的新技 术，也许会引来一些无目的的访问者，但大多 数的用户所关心的还是那些有价值的内容以及 提供良好客户服务的能力，因此应该合理地使 用新技术。 （3）滚动字幕、变换的选择以及持续性动画 不要使用那些不断运动的页面元素，运动的动 画容易对人的视觉产生不良的影响，闪烁的东 西更是令人无法接受，页面应该创造平和而安 静的环境以便于浏览。 （4）孤立页面 应该确保每一个页面都具有清楚的标记以显示 它是属于那一个站点的，同样的，每一个页面 都应该有一个通向主页的链接，以及该页面在 站点中的逻辑位置的指示。 （5）网站导航支持匮乏 在一开始设计网站时，就得十分清楚所要展示 的信息的体系结构，并且把这些明白无误地展 现给用户。设置一个网站地图，用户就能够知 道他们所在的位置。 （6）非标准的链接颜色 用户还没有访问过的页面链接应该是蓝色的； 已经访问过的页面链接应该是紫色或者红色的。 不要把这些颜色混淆起来，因为通过链接的颜 色来判断页面是否已经被访问过，从而了解访 问的路线，这是大部分浏览器所支持的标准导 航辅助特性之一。要让用户明确这种链接颜色 的含义，颜色使用的一致性是关键。 （7）过时信息 应该把网页维护费列入部门预算。维护往往是 改进网站内容的经济途径，许多旧的页面仍可 以保持原有内容，只要链接到新页面上就可以， 那些过期的网页应该彻底地从服务器上清理掉。 （8）过长的下载时间 研究表明，页面的反应时间超过10至15秒，用 户就很容易失去兴趣，网页设计中尽量少地使 用图片，如果使用也要进行压缩。 （9）网页标题 很多网页设计者并没有为他们的网页设定标 题，这是个错误，搜索引擎会根据网页的标题 来进行识别。而且，用户在浏览器的收藏夹中 存储网页地址的时候，默认的名称也是网页的 标题。一个不太明显的错误是网站的设计者在 每个页面上都使用相同的标题，如果为每个页 面都提供不同的标题来进行识别，那将会非常 有帮助。当然，标题应当是简洁清晰的，冗长 的网页标题和没有标题的网站是一样糟糕的。 （10）间接链接/中转链接/重定向链接 不要阻止其它网站直接链接您的网站内容，有 很多大型的内容提供商违反了这一规则，比如 新闻网站将其它网站引用的链接重定向，这样 访问者往往停留在您的首页。使用这种笨拙的 手段似乎认为强迫访问者进入首页就能让他们 对其它的内容感兴趣，但实际上，这样做的结 果只会让人们扫兴而走。 本章小结 本章详细介绍了网站设计的原则，网站设 计的风格和创意，以及网站设计的规范和常见 的错误，让读者深入了解网页设计的丰富内涵， 为下一步的网页制作做好充分的理论准备。