第2章 网站规划设计

网站规划与网页设计电子工业出版社同名教材配套电子教案2009.92.1网站设计流程2.2确定网站的类型2.3定位网站的主题和名称2.4确定网站CI形象2.5确定网站的栏目和版块2.6确定网站的整体风格2.7确定网站的目录结构和链接结构2.8网站内容的确定2.9网页的设计2.10浏览器版本和分辨率第2章网站规划设计网站设计的主要任务包括：网站架构设计，以浏览器为客户端的Web应用程序开发（如新闻中心、网上商店、虚拟邮局、客户关系管理等），系统测试及网站发布等。设计过程大体上分为以下13个阶段：1编写网站设计的计划书；2确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点；3确定网站提供的内容；4网站交互设计，如信息反馈、意见调查等；5对网站的内容进行分类；6设计网页必有的内容，如公司标志、联系方法和导航条等；7讨论并确定方案；8制作网页的模板；9制作网页并在不同平台的浏览器上测试网页；10检查网页的链接；11让部分顾客或员工试用网站，并提出反馈意见；12根据需要修改不合适的地方；13正式发布网站。2.1网站设计流程1．门户网站门户网站（PortalSite）集合了众多内容，提供多样服务，并使其尽可能地成为网络用户的首选。目前比较知名的中文门户网站有三类：一类是像新浪、搜狐、网易这样完全由国内网络公司经营的网站，网站内容除了搜索引擎外，还包括新闻、娱乐、游戏、文化、体育、健康、科技、财经、教育等若干版块，以及网上短信、个人主页空间、免费邮箱等服务项目；第二类是境外投资的网站，如中文雅虎、美国在线等，网站内容以新闻和娱乐为主，少数提供免费信箱、在线聊天等服务项目；第三类是国内传统媒体办的网站，以人民网、新华网、央视国际为代表，以提供新闻和时事评论为主。2.2确定网站的类型2．普及型网站企事业单位和个人根据自身要求建立和发布的以介绍其基本情况、通信地址、产品和服务信息、供求信息、人员招聘及合作信息等为主旨的网站属于普及型网站。该类网站以向客户、供应商、公众和其他一切对该网站感兴趣的人宣传、推介自身，并树立网上形象为目的，网站内容一般比较全面。通过访问该网站，可以及时了解这些单位的业务范围、最新动态、产品及价格，并可以通过网站提供的用户咨询服务与相关部门进行在线信息交流。此类网站包括企业网站、大学网站、政府网站及数量众多的个人网站。2.2确定网站的类型3．电子商务类网站电子商务类网站分为B2B（商家对商家）和B2C（商家对个人客户）两种，按照交易过程可分为商品检索、商品采购、订单支付三个阶段。因此，电子商务网站应该具有如下功能：•商品发布功能；•商品选购功能；•具有个性化的采购订单模板，顾客进行购物组合比较；•“购物车”内置的价格计算模型可以根据商家的价格体系灵活定制；•在线交易功能；•商品交接、资金结算功能。2.2确定网站的类型4．媒体信息服务类网站媒体信息服务类网站是报社、杂志社、广播电台、电视台等传统媒体为了树立自己的网上形象，方便服务对象而建立的网站，主要功能包括：信息发布、电子出版、客户在线咨询、网站管理。5．办公事务管理网站办公事务管理网站是企业事业单位为了实现办公自动化而建立的内部网站，包括以下主要功能模块：办公事务管理、人力资源管理、财务资产管理和网站管理。6．商务管理网站商务管理网站是企业内部为了进行广告及商品管理、客户管理、合同管理、营销管理等目的而建立的网上办公平台。2.2确定网站的类型2.3.1网站主题的确定所谓网站的主题也就是网站的题材。网站使用的主要题材有：网上求职、网上聊天/ICQ、网上社区/讨论/邮件列表、计算机技术、网页/网站开发、娱乐网站、旅行、参考/资讯、家庭/教育、生活/时尚等。在选择网站题材的时候要注意以下3点。1．主题小而内容精2．题材最好是自己擅长的内容3．题材不要太滥、目标不要过高2.3定位网站的主题和名称2.3.2网站名称的确定网站名称也是网站设计的一部分，而且是很关键的一个要素。例如，“电脑学习室”和“电脑之家”相比，显然后者更简练些；“迷笛乐园”和“MIDI乐园”相比，显然后者含义更清晰。和现实生活一样，网站名称是否端正、响亮、易记，对网站的形象和宣传推广也有很大影响。选择网站的名称时要注意以下3点。1．名称要端正2．名称要易记3．名称要有特色2.3定位网站的主题和名称所谓CI（CorporateIdentity，企业形象），是指通过强化视觉效果的手段来加深用户对企业形象的印象。在现实生活中，CI策划的例子比比皆是，例如，可口可乐公司拥有全球统一的标志、色彩和产品包装，给人们的印象极为深刻。1．设计网站的标志（Logo）首先设计者需要设计一个网站的标志（Logo）。如同商标一样，Logo是站点特色和内涵的集中体现。Logo可以是中文、英文字母、符号或图案，也可以是动物或人物等。例如，新浪网用字母sina加眼睛作为Logo，体现网站的敏锐和动感的特色。Logo的设计创意一般来自网站的名称和内容。2.4确定网站CI形象2．设计网站的标准色彩网站给人的第一印象来自视觉的冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配，将产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如，IBM的深蓝色，肯德基的红色条纹，Windows的红、蓝、黄、绿色块，都使浏览者觉得很贴切，很和谐。一般来说，一个网站的标准色彩不宜超过3种，太多则让人眼花缭乱。标准色彩要用于网站的Logo、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。2.4确定网站CI形象3．设计网站的标准字体标准字体是指用于Logo、标题和主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的特有风格，设计者可以根据需要选择一些特别字体。例如，为了体现专业性可以使用粗仿宋体，为了体现设计精美可以用广告体，为了体现亲切随意可以用手写体等。4．设计网站的宣传标语网站的宣传标语也可以说是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。它类似于实际生活中的广告语句，例如，雀巢的“味道好极了”，Intel的“给你一颗奔腾的心”，给人们留下的印象都极为深刻。2.4确定网站CI形象2.5.1设计网站的栏目网站栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在拟订栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下4点。1．紧扣网站主题2．设计一个最近更新或网站指南栏目3．设计一个可以互动交流的栏目4．设计一个下载或常见问题回答栏目2.5确定网站的栏目和版块2.5.2设计网站的版块版块比栏目的概念要大一些，每个版块都可以有自己的栏目。举个例子，网易站点分新闻、体育、财经、娱乐、教育等版块，每个版块下面有各自的主栏目。一般的个人站点内容较少，只要有主栏目就够了，不需要设置版块。如果设计者觉得的确有必要设置版块时，应该注意以下几点：•各版块要有相对独立性；•各版块要相互关联；•版块的内容要围绕站点主题。2.5确定网站的栏目和版块网站的整体风格及其创意设计是站长们最希望、也是最难以掌握的。其难就难在没有一个固定的程式可以参照和模仿。对同一个主题，任何两个设计者都不可能设计出完全一样的网站。在设计网站风格时应注意以下4点。1．风格是建立在有价值的内容之上的2．将网站Logo尽可能地放在每个页面最突出的位置3．使用统一的图片处理效果4．设计宣传标语2.6确定网站的整体风格2.7.1设计网站的目录结构网站的目录是指用户建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，以及内容的扩充和移植有着重要的影响。下面是建立目录结构的一些注意事项。1．不要将所有文件都存放在根目录下2．按栏目内容建立子目录3．在每个主目录下都建立独立的images目录4．目录的层次不要太深5．不要使用中文目录名6．不要使用过长的目录名2.7确定网站的目录结构和链接结构2.7.2设计网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。建立网站的链接结构有以下两种基本方式。1．树状链接结构树状链接结构类似于DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。其优点是条理清晰，访问者明确知道自己在什么位置，不会“迷路”。其缺点是浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。2．星状链接结构星状链接结构类似于网络服务器的链接，每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。其缺点是链接太多，容易使浏览者“迷路”，搞不清自己在什么位置，看了多少内容。2.7确定网站的目录结构和链接结构1．简述网站建站的步骤。2．网站的规划与设计的原则和方法是什么？3．举例说明网站主题的分类和选择主题的原则。4．什么是网站的CI形象？怎样设计网站的CI形象？打开网易主页（），查看其CI形象标志。5．打开搜狐网主页（），了解搜狐网的主要版块和栏目。6．简述确定网站风格的注意事项。7．举例说明怎样设计网站的目录结构和链接结构。8．简述组织网站内容的方法。9．简述怎样撰写网站策划书？习题2