网站设计风格和创意课件.ppt

1、第第3章章 电子商务网站内容设计电子商务网站内容设计l【本章导读【本章导读】l 本章对电子商务网站的内容设计进行了详细的介绍：第一节首先介绍使用那些方法对网站进行合理的需求分析；第二节从主题和功能两个方面对网站的定位进行深入的探讨；第三节主要介绍网站的内容规划，包括网站的总体结构设计和常用模块；最后两节分别从网站建设所涉及的技术支持和进度规划等进行介绍。l【本章要点【本章要点】l 需求分析基本内容及方法l 主题、功能定位l 结构设计、模块设计l 网络平台、服务支撑体系l 数据库设计、网站安全l 网站建设进度规划l3.1网站设计的原则l3.2网站设计风格和创意l3.3页面内容设计l3.4设计中的

2、默认规范l3.5网站设计常见错误l本 章 小 结3.1网站设计的原则网站设计的原则l（1）明确建立网站的目标和用户需求 Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，牢记以“消费者（customer)”为中心，而不是以“美术”为中心进行设计规划。在设计规划之初重点考虑：建设网站的目的是什么？为谁提供服务和产品？企业能提供什么样的产品和服务？网站的目的消费者和受众的特点是什么？企业产品和服务适合什么样的表现方式（风格）？l（2）总体设计方案

3、要求主题鲜明 在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。要做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题。调动一切手段充分表现网站点的个性和情趣，办出网站的特点。 Web站点主页应具备的基本成分包括：页头，用于准确无误地标识你的站点和企业标志； Email地址，用来接收用户

4、垂询；联系信息，如普通邮件地址或电话；版权信息，用于声明版权所有者等。注意重复利用已有信息，如客户手册、公共关系文档、技术手册和数据库等可以轻而易举地用到企业的Web站点中。l（3）网站的版式设计l网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字、图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，应讲究整体布局的合理性

5、，使浏览者有一个流畅的视觉体验。l（4）色彩在网页设计中的作用l色彩是艺术表现的要素之一。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。按照色彩的记忆性原则，一般暖色较冷色的记忆性强；色彩还具有联想与象征的物质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以设计出售冷食的虚拟店面，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些。网页的颜色应用并没有数量的限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，有CIS（企业形象识别系统）的更应该按照其中的VI进行色彩运用。

6、l在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。在设计中要考虑主要读者群的背景和构成。l（5）网页形式与内容相统一l要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。 运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，

7、它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。l（6）三维空间的构成和虚拟现实 l网络上的三维空间是一个假想空间，这种空间关系需借助动静变化、图像的比例关系等空间因素表现出来。在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。图片、文字前后叠压所构成的空间层次目前还不多见，网上更多的是一些设计比较规范、简明的页

8、面，这种叠压排列能产生强节奏的空间层次，视觉效果强烈。网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。现在，人们已不满足于HTML语言编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在Web网上展示其迷人的风采，于是VRML语言出现了。VRML是一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多地为虚拟现实环境服务。l（7）多媒体功能的利用 l网络资源的优势之一是多媒体功能。要吸引浏

9、览者注意力，页面的内容可以用三维动画、FLASH等来表现。但要注意，由于网络带宽的限制，在使用多媒体的形式表现网页的内容时应考虑客户端的传输速度。 l（8）网站测试和改进l网站测试实际上是模拟用户询问网站的过程，用以发现问题并改进设计。要注意让用户参与网站测试。l（9）内容更新与沟通l企业Web站点建立后，要不断更新内容。站点信息的不断更新，让浏览者了解企业的发展动态和网上职务等，同时也会帮助企业建立良好的好象。在企业的Web站点上，要认真回复用户的电子邮件和传统的联系方式如信件、电话垂询和传真，做到有问必答。最好将用户的用意进行分类，如售前一般了解售后服务等，由相关部门处理，使网站访问者感受

10、到企业的真实存在并由此产生信任感。注意不要许诺你实现不了的东西，在你真正有能力处理回复之前，不要恳求用户输入信息或罗列一大堆自己不能及时答复的电话号码。如果要求访问者自愿提供其个人信息，应公布并认真履行个人隐私保承诺。l（10）合理运用新技术l新的网页制作技术几乎每天都会出现，如果不是介绍网络技术的专业站点，一定要合理地运用网页制作的新技术，切忌将网站变为一个制作网页的技术展台，永远记住用户方便快捷地得到所需要的信息是最重要的。 对于网站设计者来说，必须学习跟踪掌握网页设计的新技术如Java、DHTML、XML等，根据网站的内容和形式的需要合理地应用到设计中。3.2 网站设计风格和创意网站设计

11、风格和创意l3.2.1 网站总体风格 应该如何树立网站风格呢？可以分这样几个步骤实施：l（1）确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头。首先必须保证内容的质量和价值性，这是最基本的，无须置疑。l（2）要弄清楚自己希望站点给浏览者的印象是怎么样的，可以从这几方面来理清思路： 如果只用一句话来描述你的站点，应该是：有创意，专业，有实力，有美感，有冲击力。l想到你的站点，可以联想到的色彩是：热情的红色，幻想的天兰色，聪明的金黄色。l想到你的站点，可以联想到的画面是：一份早报，一辆法拉利跑车，人群拥挤的广场，杂货店。l如果网站是一个人，他拥有的个性是：思想成熟的中年人

12、，狂野奔放的牛仔，自信憨厚的创业者。l浏览者觉得你和其他网站的不同是：可以信赖，信息最快，交流方便。l浏览者和你交流合作的感受是：师生，同事，朋友，长幼。l通过这样一份调查，经统计后的结果会告诉你：你网站现在的差距、弱点及需要改进的地方。l（3）在明确自己的网站印象后，开始努力建立和加强这种印象。经过第二步印象的“量化”后，你需要进一步找出其中最有特色特点的东西，就是最能体现网站风格的东西，并以它作为网站的特色加以重点强化，宣传。例如：再次审查网站名称、域名、栏目名称是否符合这种个性，是否易记；审查网站标准色彩是否容易联想这种特色，是否能体现网站的性格等等；具体的做法没有定式，下面仅提供一些参

13、考：l将网站的标志logo，尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。l突出网站的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。l突出网站的标准字体。在关键的标题、菜单、图片里使用统一的标准字体。l使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。l使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。l使用自己设计的花边、线条、点。l展示网站的荣誉和成功作品。l风格的形成不是一次定位的，只有在实践中不断的强化、调整、修饰，才会逐渐的形成自己独特的，而又被大众所接受的风格。l3.2.2 网站的创意设

14、计 创意思考的过程分五阶段： l（1）准备期：研究所搜集的资料，根据旧经验，启发新创意；l（2）孵化期：将资料咀嚼消化，使意识自由发展，任意结合；l（3）启示期：意识发展并结合，产生创意； l（4）验证期：将产生的创意讨论修正；l（5）形成期：设计制作网页，将创意具体化。3.3 页面内容设计页面内容设计l3.3.1 主页设计l设计一个主页，具体步骤如下：l（1）确定主页的功能模块l主页的功能模块是指设计人员需要在主页上实现的主要内容和功能。一般站点都含有网站名称（Logo）、广告条（Banner）、主菜单（Menu）、新闻（News）、搜索（Search）、友情链接（Links）、邮件列表（M

15、aillist）、计数器（Count）、版权（Copyright）等模块。用户也可根据主页设计的需要选择其中部分模块即可。l（2）设计主页的版面l在功能模块确定后，开始设计主页的版面，如何在一个页面上编排这些功能模块，以使得主页的整体效果最好，就全凭网页设计者的创意和想象力了，一般都需要先勾画草图，修改满意后，然后在网页制作软件中实现。l（3）处理技术上的细节l在技术上，主页考虑字体的风格、超链接的实现以及图形、动画与文字的关系等。主页面的大小要适中，既要表达网站的主题，又要尽量精简，应避免因首页内容多导致加载时间过长，而给用户不好的印象。l3.3.2 栏目与版面设计l1. 栏目设计l栏目是一

16、个网站的大纲索引，是网页上需要展示的信息，栏目应该将网站的主体明确显示出来，一般的网站栏目安排要注意以下几个方面。l（1）紧扣网站主题l通常将主题按一定的方法分类，将它们作为网站的主栏目。主栏目个数在总栏目中要占绝对优势，这样网站才会显得专业、主题突出，并且容易给人留下深刻的印象。l（2）设立一个最近更新或网站指南栏目l如果网站的主页没有安排版面放置最近更新的内容消息，就有必要设置一个“最近更新”栏目，这样做是为了照顾常来的访客，让网站的主页更加人性化。l如果网站主页的内容庞大，层次较多，而又没有站内搜索，则有必要设置一个“本站指南”或“内容导航”栏目，这样可以帮助初访者快速找到他们想要的内容

17、。l（3）设定一个可以双向交流的栏目l双向交流的栏目不需要很多，但一定要有，比如论坛、留言板、邮件等，可以让浏览者留下他们的信息。有调查表明，提供双向交流的站点比简单的留一个E-mail信箱更具有亲和力。l（4）设置一个下载或常见问题回答栏目l网络的特点是信息共享，如果你看到一个站点有大量优秀的、有价值的资料，你肯定希望能一次性下载，而不是一页一页的浏览保存，如果站点经常收到网友关于某个方面问题的来信，应该设立一个常见的问题回答的栏目，这样既方便了访问者，也节约了自己的时间。l至于其他的辅助内容，如关于本站、版权信息等可以不放在主栏目，以免冲淡主题。在主栏目中尽可能删除与主题无关的栏目，而将最

18、有价值的内容列在栏目上，以便于访问者浏览和查询。l2. 版面布局l在布局过程中要做到以下几点：l（1）主次分明，突出重点：在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央或者中央偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到主次有别。l（2）图文并茂：文字和图片具有相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气；页面上图片太多，缺少文字，比如会减少页面的信息容量。因此最理想的效果是文字和图片的密切配合，既能活跃页面，又使主页又丰富的内容。l版面布局的步骤：l（1）轮廓设计：一个新

19、的页面可以看成是一张白纸，设计者可以尽可能的发挥想象力，把你想到的景象画上去。这属于创造阶段，不讲究细腻工整，也不考虑细节功能，只需大概的勾画出创意的轮廓即可。l（2）布局设计：在轮廓设计的基础上，将所需要的各种功能模块安排到页面上，在排放时必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的内容放在最显眼、最突出的位置，然后再考虑次要模块的摆放。l（3）细节设计：将粗略布局精细化、具体化。l详细介绍几种常用的版面布局形式:l（1）“T”形结构布局:是指页面顶部为横条网站标志加广告条，下方左页面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”，所以称之为“

20、T”形布局，这是网页设计中用的最多的一种布局方式。这种布局方式的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法，缺点是规矩呆板。l（2）“口”形布局:这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情链接，中间是主要内容，这种布局的优点是可以充分的利用版面，信息量大，缺点是页面拥挤，不够灵活。l（3）“国”字形:也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等，这种结构是网上用的最多的一种

21、结构类型。l（4）封面型:这种类型基本是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在主页的图片上做链接而没有任何的提示。这种类型大部分出现在企业网站和个人主页，如果处理得好，会给人带来很好的感觉。 版面布局应该加强视觉效果，加强文档的可视度和可读性。统一的视觉、新鲜和个性是网页布局的最高境界。l3.3.3 美工设计 随着网页制作经验的积累，在选择色彩的时候会有这样的一个趋势：单色五彩缤纷标准色单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好

22、的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。l在为网页选择合适色彩的过程中，应该遵循以下几个原则：l（1）色彩的鲜明性：网页的色彩要鲜艳，容易引人注目。l（2）色彩的独特性：要有与众不同的色彩，使得大家对你的印象强烈。l（3）色彩的合适性：即色彩要和你表达的内容气氛相适合，如用粉色体现女性站点的柔性。l（4）色彩的联想性：不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色

23、彩要和你网页的内涵相关联。l在选择网页色彩搭配过程中，还要注意以下几个问题：l（1）了解你的网站所要传达的讯息和品牌，选择可以加强这些讯息的颜色。例如，如果在设计一个强调稳健的金融机构，那么就要选择冷色系、柔和的颜色，如蓝、灰或绿。在这样的状况下，如果使用暖色系或活泼的颜色，可能会破坏了该网站品牌。l（2）了解你的读者群。文化差异可能会使色彩产生非预期的反应。同时，不同地区与不同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色，但这样的颜色却引不起高年龄层的兴趣。l（3）不要使用过多的颜色。除了黑色和白色以外，约选择四到五个颜色就够了。太多的颜色会导致混淆，也会拉走读者的注意力。l（

24、4）在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果，也会妨碍观众阅读。白底黑字的阅读效果最好。l（5）用灰阶来测试对比。当你在处理黑色、白色和灰色以外的颜色的时候，有时候会很难决定每个颜色的相对值。为了要确认你的色盘能提供足够的对比，你可以建立一个仿真网站，并将它转换成灰阶即可。l（6）选择颜色要注意时效性。同一个色彩很容易就充斥着整个市场，且消费者很快的就对流行色彩感到麻木。但就另外一个角度来看，你可以使用几十年前的流行色彩，引起人们的怀旧之情。l（7）选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建立功能性的颜色，例如标题和超级链接等。l（8）注意网站色差问题。每一个网站开发

25、人员都知道，即使是网络通用颜色在跨平台显示的时候都会有些不同。记得要校正你的gamma值，并在不同的作业平台上测试你的色盘。l3.3.4 导航设计l具体的要求如下：l（1）辅助导航：为用户提供一个直观的指示，让用户知道现在所在网站的位置，每一级位置的名称都得有链接可返回，在每一个网页都必须包括辅助导航以及左上角的网站LOGO标识。l（2）网站LOGO链接：每一个出现的网站LOGO都要加上回到网站首页的链接，用户已经习惯了点击网站LOGO作为回到网站首页的方法。l（3）导航条的位置：主导航条的位置应该在接近顶部或网页左侧的位置，如果因为内容过多需要子导航时，要让用户容易地分辨出哪个是主导航条，哪

26、个是某主题的子导航条。l（4）联系信息：进入“联系我们”网页的链接或者直接呈现详细的联系方式都必须在网站的任何一个网页中可以找到。l（5）导航使用的简单性：导航的使用必须得尽可能的简单，避免使用下拉或弹出式菜单导航，如果没办法一定得用，那么菜单的层次不要超过两层。l（6）网页指示：应该让用户知道现在所看的网页是什么和与现在所看网页的相关网页是什么，例如通过辅助导航“首页 新闻频道 焦点新闻”里的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。l（7）已浏览网页的指示：最简单地可以通过已点击超链后的变色，如果不在同一网页的超链接网页，可以在其它位置显示用户已浏览过的

27、内容。l（8）登陆退出口：登陆入口和退出登陆出口要在全网站的每一个网页都可以找到，让用户进入任一网页都可以登陆和退出。l（9）导航内容明显的区别：导航的目录或主题种类必须得清晰，不要让用户困惑，而且如果有需要突出主要网页的区域，则应该与一般网页在视觉上有所区别。l（10）导航的链接必须全是有效链接：无论是一般导航还是有下拉菜单的导航，里面的所有文字都应该是有效的链接。l（11）准确的导航文字描述：用户在点击导航链接前对他们所找的东西有一个大概的了解，链接上的文字必须能准确描述链接所到达的网页内容。l（12）搜索导航结果：搜索的结果一定不要出现“无法找到”的结果，这是很让用户失望的，如果无法精确

28、找出结果，搜索功能应该实现对错字，类似产品或相关产品给出一个相近的模糊结果。l在网页设计中，为了防止由于疏忽而造成超链接失败，应在栏目和版面设计中画出超链接的关系，在网页上传后，逐一测试每一页的每个超链接是否有效，以防出现失败的超链接。l3.3.5 图像与动画设计l图像在网页中具有画龙点睛的作用，它可以装饰页面，表现个人的风格和情调。一个纯文字的网页是吸引不了浏览者的，但如果页面上的图像过多，就会喧宾夺主，因为图像本身是为主页内容服务的，所以要合理地使用图像与文字进行搭配。l网页中可以使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，其中使用最多的是GIF和JPEG两

29、种格式。这两种格式的图像有较高的压缩率，在不影响图像质量的前提下，可以将图像压缩，而且目前绝大多数的图像处理软件和文字处理软件以及网页制作软件都支持这两种格式的图像。一般色彩鲜艳、高分辨率的图像采用JPEG格式，色彩单调、低分辨率的采用GIF格式。l当在网页中需要载入一个较大的GIF或JPEG图像文件时，装载速度可能会很慢。为改善网页的视觉效果，可在载入是设置为隔行扫描，隔行扫描在显示图像开始看起来非常模糊，接着细节逐渐添加上去直到图像完全显示出来；也可以将该图像做成一个小的缩略图，然后将缩略图链接到该图像上，如果用户在查看缩略图后，有兴趣的话，可以通过点击链接打开该图像。l一个受欢迎的网站总

30、是少不了动画的，与静态的页面相比，动画更能够吸引访问者的视觉。一个富有创意、制作精美的动画会让人过目不忘。目前最流行的动画形式就是Flash动画，它的文件非常小，这样就便于下载，因此不会对网页的浏览造成影响，但是为了观看Flash动画，在浏览者的计算机必须安装相应的插件才行。l在选择、制作Flash动画时，应该与网页内容有机的结合起来。在一些内容比较严肃的主页，要慎用Flash动画，毕竟主页还是要依靠文字和图像作为主题来传播信息的。3.4 设计中的默认规范设计中的默认规范l1. 设计风格l依照网站的定位确定整体的设计风格。l主体框架页面、内容页尽量采用方型结构。禁用长距离的斜线及弧线结构，可允

31、许小范围内的斜线及弧线。封面页、专题页可不受此限制。 l设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧，拐角可以有曲线变化。拐角块最大不得超过18像素。同一页面弧度尽量保持一致。 l各主要栏目之间要求使用一致的布局，包括一致的页面元素和一致的导航形式，使用相同的铵钮，相同的顺序。可跟首页有变化。 l首页及各级页面都必须带有网站的Logo(建议小于15054)，并链接到网站首页。l统一按兼容分辨率800*600设计。为了使显示更友好，建议使用778或者760 px设计。l网站页面长度建议1屏半到2屏。原则上长度不超过3屏，宽度不超过1屏。根据用户习惯和网站需要，国内中文网站综合类、门户类

32、网站可设计超过3屏。l2. 图形设计规范 l（1）图片标准尺寸l全尺寸banner为46860px，半尺寸banner为23460px，小logo为8831px。另外15068、12090，12060也是标准尺寸，网站logo一般控制在15054以内，客户要求或特殊广告图片可另定尺寸。建议首页存储大小不得超过150K(包括图片)，其它页面经压缩后不得超过70K。l（2）图片的分类及命名规则l 名称分为头尾两部分，用下划线隔开。l 头部分表示此图片的大类性质，例如广告、标志、菜 单、按钮等。l 放置在页面顶部的广告、装饰图案等长方形的图片取名 为banner。l 标志性的图片取名为：logo。l

33、 在页面上位置不固定并且带有链接的小图片取名为 button。l 在页面上某一个位置连续出现，性质相同的链接栏目的 图片取名为：menu。 l 装饰用的照片取名：pic。l 不带链接表示标题的图片取名：title；依照此原则类 推。l 尾部分用来表示图片的具体含义，如果有类似图片就用 数字区别。l 小标一定做成透明的。l（3）Banner制作要求 l大Banner(46860Pixel)容量尽量限制在15K内，格式尽量选用GIF及动态格式。 l帧切换时尽量半静半动。少用满底256色以上的图像。闪切变化主要体现在文字上。 l广告条的border设为0，并要求加上alt说明。 l（4）图标和图片

34、l图标的制作应简捷、色彩明快，在选用单色图标时应根据本栏目的色彩进行搭配。l图标存储为GIF格式（个别情况除外），尽量采用16色、填充色或单色。l图片依情况存成GIF或JPEG格式，原则上色调单一的图片存为GIF格式，色彩复 杂、层次丰富的存为JPEG格式。l设计时不得用15K以上的图片，如图片过大可以考虑采用图片分割的办法。l内容图片、导航图片的border设为0，并要求加上alt说明。l普通图片不必加alt说明，但如果有链接要把border设为0。l公用图片或有可能更换的图片不要指定图片的尺寸大小（width, height）。l3. 名称约定l（1）路径/文件名设定：l路径/文件命名时一

35、律采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文翻译为优先，尽量避免使用拼音作为目录名称。l（2）路径/文件名称需与栏目菜单名称具有相关性。l（3）各路径下的开始文件，命名为index.*。静态文件为index.html，动态文件为index.asp，index.aspx，index.php，index.jsp。l（4）文件名中用“_”下划线作为连接符。l（5）如页面文件过长需要拆分，建议多个文件按顺序依次命名为filename01.*、filename02.*。l（6）内容不同但属于同类的，且需定期更新的页面文件或文本采用：名称缩写(年份)月份

36、日期序号 ，如= news081508.*。l（7）大流量网站的首页和各栏目首页尽量使用以html为文件后缀名的静态页面。其他经常访问的动态页面也建议模拟为静态页面。l4. 目录结构规范l目录建立的原则：以最少的层次提供最清晰简便的访问结构。l（1）目录命名的规范（参照名称约定）；l（2）根目录一般只存放index.html以及其他必须的系统文件；l（3）每个主要栏目建立一个相应的独立目录；l（4）根目录下的images用于存放各页面都要使用的公共图片，子目录下的images目录存放本栏目页面使用的私有图片；l（5）所有JS脚本存放在根目录下的scripts目录或includes目录；l（6）

37、所有CSS文件存放在根目录下style目录；l（7）每个语言版本存放于独立的目录。例如：简体中文gb，英文en；l（8）所有flash, avi, ram, quicktime 等多媒体文件建议存放在根目录下的media目录，如果属于各栏目下面的媒体文件，分别在该栏目目录下建立media目录；l（9）广告、交换链接、banner等图片保存到adv目录；l（10）页面下载、解释时间在56k链接速度下不能超过40秒（栏目首页、表单页）或20秒（一般页面）。l5. 链接规范l（1）新闻、信息类通常用新开窗口方式打开。l（2）顶部导航、底部导航通常采取在本页打开，特殊栏目和功能可新开窗口。l（3）链接

38、带下划线为链接通常的默认风格，顶部导航或特殊位置为了观赏性可用样式表取消下划线。l（4）链接的颜色可配合主题颜色风格改变，通常为蓝色、暗蓝色、黑色，但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。l6. 页面制作规范 l（1）色彩规范l根据网站性质，避免在一个页面上有太多的色彩，活泼但不失稳重，颜色柔和但不乱；l文字的色彩要与页面协调； l即使页面有背景图片，也应该设置背景色，通常默认设置背景色为白色。l（2）表格 l定义表格宽度时使用绝对值（指定像素）；l内嵌最大表格宽度为775pix，align=left（前提在设定为778pix的框架内）；l页面中从上至下尽量拆分成多个

39、层叠的表格，尽量用TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上和；l表格必须指定（border，cellspacing，cellpadding），图文混排时推荐使用vspace=5 hspace=5；l为加快网页下载速度，最好使用CSS定义类表格样式。l（3）字体 l为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。l大小为9pt时，行距为120%；信息类最

40、终页面采用弹出方式；标题及正文字体规定为11pt，行距为140%。所有页面字体大小建议不要超过11pt。 l考虑字体大小的兼容性，避免使用size=2的方式定义，尽量使用pt或px并用css定义。l文字颜色与页面配色协调，不使用与背景色相近的颜色。 l非图像设计的字体一律采用windows标准宋体。如果为特殊效果需做成图，要加粗文字用Bold，不要用Strong。l页面文本不使用下划线方式，也尽量少采用粗体显示。l（4）CSS书写规范l所有的CSS的尽量采用外部调用 。l代码较长的首页和重要栏目首页可直接内嵌CSS，避免调用时间太长，使页面未及时调用CSS风格而显得凌乱。l书写时重定义的最先，

41、伪类其次，自定义最后（其中a:link a:visited a:hover a:actived要按照顺序写），便于自己和他人阅读。 l（5）JS调用规范l所有的javascript脚本尽量采取外部调用。l（6）首页head区代码规范lhead区是指首页HTML代码的和之间的内容，head区必须加入的标识： l公司版权注释： ；l网页显示字符集：例如简体中文：；l繁体中文：l；l英语：l；l网站简介：；l搜索关键字：；l网页的css规范：； l网页标题：这里是你的网页标题； l收藏夹图标：。l（7）错误页面规范l所有程序出错页面、找不到的页面不要使用默认的出错提示，要设计为带网站标识和说明的个性

42、化的出错提示页面。l（8）所有页面必须均需经过浏览器兼容测试，通常须支持主流浏览器IE、Firefox。3.5 网站设计常见错误网站设计常见错误l（1）将一个页面划分为多个框架l对使用者来说，将一个页面划分为多个框架是非常不方便的，因为框架破坏了网页的基本界面，打印输出也会变得麻烦，更糟糕的是，使用者所进行的操作可能会导致意想不到的结果。l（2）画蛇添足地使用新技术l在网页中使用Flash等需要下载插件的新技术，也许会引来一些无目的的访问者，但大多数的用户所关心的还是那些有价值的内容以及提供良好客户服务的能力，因此应该合理地使用新技术。l（3）滚动字幕、变换的选择以及持续性动画不要使用那些不断

43、运动的页面元素，运动的动画容易对人的视觉产生不良的影响，闪烁的东西更是令人无法接受，页面应该创造平和而安静的环境以便于浏览。l（4）孤立页面l应该确保每一个页面都具有清楚的标记以显示它是属于那一个站点的，同样的，每一个页面都应该有一个通向主页的链接，以及该页面在站点中的逻辑位置的指示。l（5）网站导航支持匮乏l在一开始设计网站时，就得十分清楚所要展示的信息的体系结构，并且把这些明白无误地展现给用户。设置一个网站地图，用户就能够知道他们所在的位置。l（6）非标准的链接颜色l用户还没有访问过的页面链接应该是蓝色的；已经访问过的页面链接应该是紫色或者红色的。不要把这些颜色混淆起来，因为通过链接的颜色

44、来判断页面是否已经被访问过，从而了解访问的路线，这是大部分浏览器所支持的标准导航辅助特性之一。要让用户明确这种链接颜色的含义，颜色使用的一致性是关键。l（7）过时信息l应该把网页维护费列入部门预算。维护往往是改进网站内容的经济途径，许多旧的页面仍可以保持原有内容，只要链接到新页面上就可以，那些过期的网页应该彻底地从服务器上清理掉。l（8）过长的下载时间l研究表明，页面的反应时间超过10至15秒，用户就很容易失去兴趣，网页设计中尽量少地使用图片，如果使用也要进行压缩。l（9）网页标题l很多网页设计者并没有为他们的网页设定标题，这是个错误，搜索引擎会根据网页的标题来进行识别。而且，用户在浏览器的收

45、藏夹中存储网页地址的时候，默认的名称也是网页的标题。一个不太明显的错误是网站的设计者在每个页面上都使用相同的标题，如果为每个页面都提供不同的标题来进行识别，那将会非常有帮助。当然，标题应当是简洁清晰的，冗长的网页标题和没有标题的网站是一样糟糕的。l（10）间接链接/中转链接/重定向链接l不要阻止其它网站直接链接您的网站内容，有很多大型的内容提供商违反了这一规则，比如新闻网站将其它网站引用的链接重定向，这样访问者往往停留在您的首页。使用这种笨拙的手段似乎认为强迫访问者进入首页就能让他们对其它的内容感兴趣，但实际上，这样做的结果只会让人们扫兴而走。本本 章章 小小 结结l本章详细介绍了网站设计的原则，网站设计的风格和创意，以及网站设计的规范和常见的错误，让读者深入了解网页设计的丰富内涵，为下一步的网页制作做好充分的理论准备。