网站规划设计讲解

《网站规划设计讲解》由会员分享，可在线阅读，更多相关《网站规划设计讲解（19页珍藏版）》请在金锄头文库上搜索。

1、1,网站规划与网页设计,电子工业出版社,2,2.1 网站设计流程 2.2 确定网站的类型 2.3 定位网站的主题和名称 2.4 确定网站CI形象 2.5 确定网站的栏目和版块 2.6 确定网站的整体风格 2.7 确定网站的目录结构和链接结构,第2章 网站规划设计,3,网站设计的主要任务包括：网站架构设计，以浏览器为客户端的Web应用程序开发（如新闻中心、网上商店、虚拟邮局、客户关系管理等），系统测试及网站发布等。设计过程大体上分为以下几个阶段：,2.1 网站设计流程,4,1门户网站 门户网站（Portal Site）集合了众多内容，提供多样服务，并使其尽可能地成为网络用户的首选。 目前比较知名

2、的中文门户网站有三类：一类是像新浪、搜狐、网易这样完全由国内网络公司经营的网站，网站内容除了搜索引擎外，还包括新闻、娱乐、游戏、文化、体育、健康、科技、财经、教育等若干版块，以及网上短信、个人主页空间、免费邮箱等服务项目；第二类是境外投资的网站，如中文雅虎、美国在线等，网站内容以新闻和娱乐为主，少数提供免费信箱、在线聊天等服务项目；第三类是国内传统媒体办的网站，以人民网、新华网、央视国际为代表，以提供新闻和时事评论为主。,2.2 确定网站的类型,5,2普及型网站 企事业单位和个人根据自身要求建立和发布的以介绍其基本情况、通信地址、产品和服务信息、供求信息、人员招聘及合作信息等为主旨的网站属于普

3、及型网站。 该类网站以向客户、供应商、公众和其他一切对该网站感兴趣的人宣传、推介自身，并树立网上形象为目的，网站内容一般比较全面。通过访问该网站，可以及时了解这些单位的业务范围、最新动态、产品及价格，并可以通过网站提供的用户咨询服务与相关部门进行在线信息交流。 此类网站包括企业网站、大学网站、政府网站及数量众多的个人网站。,2.2 确定网站的类型,6,3.电子商务类网站 电子商务类网站分为B2B（商家对商家）和B2C（商家对个人客户）两种，按照交易过程可分为商品检索、商品采购、订单支付三个阶段。 因此，电子商务网站应该具有如下功能： 商品发布功能； 商品选购功能； 具有个性化的采购订单模板，顾

4、客进行购物组合比较； “购物车”内置的价格计算模型可以根据商家的价格体系灵活定制； 在线交易功能； 商品交接、资金结算功能。,2.2 确定网站的类型,7,4媒体信息服务类网站 媒体信息服务类网站是报社、杂志社、广播电台、电视台等传统媒体为了树立自己的网上形象，方便服务对象而建立的网站，主要功能包括：信息发布、电子出版、客户在线咨询、网站管理。 5办公事务管理网站 办公事务管理网站是企业事业单位为了实现办公自动化而建立的内部网站，包括以下主要功能模块：办公事务管理、人力资源管理、财务资产管理和网站管理。,2.2 确定网站的类型,8,2.3.1 网站主题的确定 所谓网站的主题也就是网站的题材。 网

5、站使用的主要题材有：网上求职、网上聊天/ICQ、网上社区/讨论/邮件列表、计算机技术、网页/网站开发、娱乐网站、旅行、参考/资讯、家庭/教育、生活/时尚等。 在选择网站题材的时候要注意以下3点。 1主题小而内容精 2题材最好是自己擅长的内容 3题材不要太滥、目标不要过高,2.3 定位网站的主题和名称,9,2.3.2 网站名称的确定 网站名称也是网站设计的一部分，而且是很关键的一个要素。例如，“电脑学习室”和“电脑之家”相比，显然后者更简练些；“迷笛乐园”和“MIDI乐园”相比，显然后者含义更清晰。和现实生活一样，网站名称是否端正、响亮、易记，对网站的形象和宣传推广也有很大影响。选择网站的名称时

6、要注意以下3点。 1名称要端正 2名称要易记 应该个字之内，最好个字 3名称要有特色 eg:天籁绝音 网页陶吧,2.3 定位网站的主题和名称,10,所谓CI（Corporate Identity，企业形象），是指通过强化视觉效果的手段来加深用户对企业形象的印象。在现实生活中，CI策划的例子比比皆是，例如，可口可乐公司拥有全球统一的标志、色彩和产品包装，给人们的印象极为深刻。 1设计网站的标志（Logo） 首先设计者需要设计一个网站的标志（Logo）。如同商标一样，Logo是站点特色和内涵的集中体现。 Logo可以是中文、英文字母、符号或图案，也可以是动物或人物等。例如，新浪网用字母sina加眼

7、睛作为Logo，体现网站的敏锐和动感的特色。Logo的设计创意一般来自网站的名称和内容。,2.4 确定网站CI形象,11,2设计网站的标准色彩 网站给人的第一印象来自视觉的冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配，将产生不同的效果，并可能影响到访问者的情绪。 “标准色彩”是指能体现网站形象和延伸内涵的色彩。例如，IBM的深蓝色，肯德基的红色条纹，Windows的红、蓝、黄、绿色块，都使浏览者觉得很贴切，很和谐。 一般来说，一个网站的标准色彩不宜超过3种，太多则让人眼花缭乱。标准色彩要用于网站的Logo、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为

8、点缀和衬托，绝不能喧宾夺主。,2.4 确定网站CI形象,12,3设计网站的标准字体 标准字体是指用于Logo、标题和主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的特有风格，设计者可以根据需要选择一些特别字体。例如，为了体现专业性可以使用粗仿宋体，为了体现设计精美可以用广告体，为了体现亲切随意可以用手写体等。 4设计网站的宣传标语 网站的宣传标语也可以说是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。它类似于实际生活中的广告语句，例如，雀巢的“味道好极了”，Intel的“给你一颗奔腾的心”，给人们留下的印象都极为深刻。,2.4 确定网站CI形象,13,2.5.1 设计网站

9、的栏目 网站栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在拟订栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下4点。 1紧扣网站主题 主题栏目个数要在总栏目中占绝对优势 2设计一个最近更新或网站指南，便于搜索的栏目 3设计一个可以互动交流的栏目 4设计一个下载或常见问题回答栏目 尽可能删除与主题无关的栏目 尽可能将网站最有价值的内容列在栏目上 尽可能方便访问者的浏览和查询,2.5 确定网站的栏目和版块,14,2.5.2 设计网站的版块 版块比栏目的概念要大一些，每个版块都可以有自己的栏目。举个例子，网易站点分新闻、体育、财经、娱乐、教育等版块，每个版块下面有

10、各自的主栏目。一般的个人站点内容较少，只要有主栏目就够了，不需要设置版块。如果设计者觉得的确有必要设置版块时，应该注意以下几点： 各版块要有相对独立性； 各版块要相互关联； 版块的内容要围绕站点主题。,2.5 确定网站的栏目和版块,15,网站的整体风格及其创意设计是站长们最希望、也是最难以掌握的。其难就难在没有一个固定的程式可以参照和模仿。对同一个主题，任何两个设计者都不可能设计出完全一样的网站。在设计网站风格时应注意以下4点。 1风格是建立在有价值的内容之上的 2将网站Logo尽可能地放在每个页面最突出的位置 3使用统一的图片处理效果 4设计宣传标语,2.6 确定网站的整体风格,16,2.7

11、.1 设计网站的目录结构 网站的目录是指用户建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，以及内容的扩充和移植有着重要的影响。下面是建立目录结构的一些注意事项。 1不要将所有文件都存放在根目录下 2按栏目内容建立子目录 3在每个主目录下都建立独立的images目录 4目录的层次不要太深 5不要使用中文目录名 6不要使用过长的目录名 7. 数据库文件要单独放置,2.7 确定网站的目录结构和链接结构,17,2.7.2 设计网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。建立网站的链接结构有

12、以下两种基本方式。 1树状链接结构 树状链接结构类似于DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。其优点是条理清晰，访问者明确知道自己在什么位置，不会“迷路”。其缺点是浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。 2星状链接结构 星状链接结构类似于网络服务器的链接，每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。其缺点是链接太多，容易使浏览者“迷路”，搞不清自己在什么位置，看了多少内容。,2.7 确定网站的目录结构和链接结构,18,2.7.3 组织网站的内容 对网站进行有效组织，提高点击率访问量。 1.站点结构图 2.导航栏 3.精美的图片 4.引人入胜的内容 5.反馈表 6.联系方式页面 7.搜索工具 8.常见问题解答,2.7 确定网站的目录结构和链接结构,19,1简述网站建站的步骤。 2网站的规划与设计的原则和方法是什么？ 3举例说明网站主题的分类和选择主题的原则。 4什么是网站的CI形象？怎样设计网站的CI形象？打开网易主页（http:/ ），查看其CI形象标志。 5打开搜狐网主页（），了解搜狐网的主要版块和栏目。 6简述确定网站风格的注意事项。 7举例说明怎样设计网站的目录结构和链接结构。 8简述组织网站内容的方法。,习题2,