网页总体设计内容

《网页总体设计内容》由会员分享，可在线阅读，更多相关《网页总体设计内容（55页珍藏版）》请在金锄头文库上搜索。

1、3.1 网站设计流程 3.2 确定网站的类型 3.3 定位网站的主题和名称 3.4 确定网站CI形象 3.5 确定网站的栏目和版块 3.6 确定网站的整体风格 3.7 确定网站的目录结构和链接结构 3.8 网站内容的确定 3.9 网页的设计 3.10 浏览器版本和分辨率,第3章 网站规划设计基础,网站设计的主要任务包括： 网站架构设计; 以浏览器为客户端的Web应用程序开发（如新闻中心、网上商店、虚拟邮局、客户关系管理等）;系统测试及网站发布等。,3.1 网站设计流程,设计过程大体上分为以下13个阶段：(1/3) 1 编写网站设计的计划书； 2 确定网站设计总体思想，即网站设计如何能实现网站规

2、划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点； 3 确定网站提供的内容； 4 网站交互设计，如信息反馈、意见调查等；,设计过程大体上分为以下12个阶段：(2/3) 5 对网站的内容进行分类； 6 设计网页必有的内容， 如公司标志、联系方法和导航条等； 7 讨论并确定方案； 8 制作网页的模板；,设计过程大体上分为以下13个阶段：(3/3) 9 制作网页并在不同平台的浏览器上测试网页； 10 检查网页的链接； 11 让部分顾客或员工试用网站， 并提出反馈意见； 根据需要修改不合适的地方； 13 正式发布网站。,1门户网站（1/2）门户网站（Portal Site）集合众多内容

3、，提供多样服务，并使其尽可能地成为网络用户的首选。 目前比较知名的中文门户网站有三类： 一类是像新浪、搜狐、网易，由国内网络公司经营的网站，网站内容除了搜索引擎外，还包括新闻、娱乐、游戏、文化、体育、健康、科技、财经、教育等若干版块，以及网上短信、个人主页空间、免费邮箱等服务项目；,3.2 确定网站的类型,1门户网站（2/2）目前比较知名的中文门户网站有三类： 二类是境外投资的网站，如中文雅虎、美国在线等，网站内容以新闻和娱乐为主，少数提供免费信箱、在线聊天等服务项目；三类是国内传统媒体办的网站，以人民网、新华网、央视国际为代表，以提供新闻和时事评论为主。,3.2 确定网站的类型,2普及型网站

4、企事业单位和个人根据自身要求建立和发布的以介绍其基本情况、通信地址、产品和服务信息、供求信息、人员招聘及合作信息等为主旨的网站属于普及型网站。该类网站以向客户、供应商、公众和其他一切对该网站感兴趣的人宣传、推介自身，并树立网上形象为目的，网站内容一般比较全面。此类网站包括企业网站、大学网站、政府网站及数量众多的个人网站。,3.2 确定网站的类型,3电子商务类网站（1/2）电子商务类网站分为B2B（商家对商家）和B2C（商家对个人客户）两种，按照交易过程可分为商品检索、商品采购、订单支付三个阶段。,3.2 确定网站的类型,3电子商务类网站（2/2） 网站应该具有如下功能： 商品发布功能； 商品选

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

6、商务管理网站是企业内部为了进行广告及商品管理、客户管理、合同管理、营销管理等目的而建立的网上办公平台。,3.2 确定网站的类型,3.3.1 网站主题的确定网站的题材。主要题材有：网上求职、网上聊天/ICQ、网上社区/讨论/邮件列表、计算机技术、网页/网站开发、娱乐网站、旅行、参考/资讯、家庭/教育、生活/时尚等。 选择网站题材的时候要注意以下3点：1主题小而内容精 2题材最好是自己擅长的内容 3题材不要太滥、目标不要过高,3.3 定位网站的主题和名称,3.3.2 网站名称的确定（1/2）是网站设计很关键的一个要素。 例如， “电脑学习室”和“电脑之家”（后者更简练）“迷笛乐园”和“MIDI乐园

7、”（后者含义更清晰）,3.3 定位网站的主题和名称,3.3.2 网站名称的确定（2/2）网站名称是否端正、响亮、易记，对网站的形象和宣传推广也有很大影响。 选择网站的名称时要注意以下3点：1名称要端正 2名称要易记3名称要有特色,3.3 定位网站的主题和名称,所谓CI（Corporate Identity，企业形象），是指通过强化视觉效果的手段来加深用户对企业形象的印象。 在现实生活中，CI策划的例子比比皆是，例如，可口可乐公司拥有全球统一的标志、色彩和产品包装，给人们的印象极为深刻。,3.4 确定网站CI形象,1设计网站的标志（Logo）首先设计者需要设计一个网站的标志（Logo）。Logo

8、是站点特色和内涵的集中体现。Logo可以是中文、英文字母、符号或图案，也可以是动物或人物等。例如，新浪网用字母sina加眼睛作为Logo，体现网站的敏锐和动感的特色。Logo的设计创意一般来自网站的名称和内容。,3.4 确定网站CI形象,2设计网站的标准色彩（1/2）确定网站的标准色彩是相当重要的一步。不同的色彩搭配，将产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如，IBM的深蓝色，肯德基的红色条纹，Windows的红、蓝、黄、绿色块，都使浏览者觉得很贴切，很和谐。,3.4 确定网站CI形象,2设计网站的标准色彩（2/2）通常，一个网站的标准色彩

9、不宜超过3种。 标准色彩要用于网站的Logo、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。,3.4 确定网站CI形象,3设计网站的标准字体标准字体是指用于Logo、标题和主菜单的特有字体。 一般网页默认的字体是宋体。为了体现站点的特有风格，设计者可以根据需要选择一些特别字体。例如，为了体现专业性可以使用粗仿宋体，为了体现设计精美可以用广告体，为了体现亲切随意可以用手写体等。,3.4 确定网站CI形象,4设计网站的宣传标语网站的宣传标语是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。 它类似于实际生活中的广告语句，例如，雀巢

10、的“味道好极了”，Intel的“给你一颗奔腾的心”，给人们留下的印象都极为深刻。,3.4 确定网站CI形象,3.5.1 设计网站的栏目网站栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在拟订栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下4点：1紧扣网站主题2设计一个最近更新或网站指南栏目3设计一个可以互动交流的栏目4设计一个下载或常见问题回答栏目,3.5 确定网站的栏目和版块,3.5.2 设计网站的版块（1/2）版块比栏目的概念要大一些，每个版块都可以有自己的栏目。举例，网易站点分新闻、体育、财经、娱乐、教育等版块，每个版块下面有各自的主栏目。一般的个人站点

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

12、语,3.6 确定网站的整体风格（2/2）,3.7.1 设计网站的目录结构（1/2）网站的目录是指用户建立网站时创建的目录。目录结构的好坏，对于站点本身的上传维护，以及内容的扩充和移植有着重要的影响。,3.7 确定网站的目录结构和链接结构,3.7.1 设计网站的目录结构（2/2） 建立目录结构的一些注意事项：1不要将所有文件都存放在根目录下2按栏目内容建立子目录3在每个主目录下都建立独立的images目录4目录的层次不要太深5不要使用中文目录名6不要使用过长的目录名,3.7 确定网站的目录结构和链接结构,3.7.2 设计网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构

13、基础之上，但可以跨越目录。,3.7 确定网站的目录结构和链接结构,两种基本方式: (1/2) 1树状链接结构首页链接指向一级页面，一级页面链接指向二级页面。其优点是条理清晰，访问者明确知道自己在什么位置。 缺点是浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。,3.7 确定网站的目录结构和链接结构,两种基本方式:(2/2) 2星状链接结构类似于网络服务器的链接，页面相互之间都建立有链接。优点是浏览方便，随时可以到达自己喜欢的页面。其缺点是链接太多，搞不清自己在什么位置，看了多少内容。,3.7 确定网站的目录结构和链接结构,确定网站的题材，并且收集和组织许多相关的资料内容后

14、，按照以下方面组织内容:1站点结构图2导航栏3精美的图片4引人入胜的内容,3.8 网站内容的确定,5反馈表6联系方式页面7搜索工具8常见问题解答,3.9.1 网页的基本元素常见的网页元素包括文本、图片、超链接、表格、导航栏、动画和交互表单。1文本2图片和动画3声音和视频4超链接,3.9 网页的设计,5导航栏6表格7表单8其他常见元素,3.9.2 网页布局网页是网站构成的基本元素。网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要因素网页布局。,3.9 网页的设计,1网页布局的基本概念（1）页面尺寸(1/2)一般分辨率1024*768像素情况下，页面显

15、示尺寸为1007*600像素； 在分辨率为800*600像素的情况下，页面的显示尺寸为780*428像素； 在分辨率为640*480像素的情况下，页面的显示尺寸为620*311像素。,3.9 网页的设计,1网页布局（1）页面尺寸(2/2)在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。应当注意: 除非设计者肯定站点的内容很有吸引力，否则不要让浏览者拖动页面超过三个屏幕。,3.9 网页的设计,（2）整体造型这里是指页面的整体形象，图形与文本的结合应该是层叠有序的。对于页面的造型，设计者可以充分运用自然界中的各种形状及它们的组合，如矩形、圆形、三角形、菱形等。虽然不同形状代表不同意义，但目前的网页制作大多结合多种图形加以设计，其中某一种图形的构图比例可能占得多一些。,3.9 网页的设计,2网页布局的一般步骤(1/3)（1）构思根据网站内容的整体风格，设计版面布局。不要讲究细节，重在轮廓。多种想法尽量都画出来，然后再比较，采用一种比较满意的方案。,3.9 网页的设计,2网页布局的一般步骤(2/3)（2）初步填充内容把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。要注意重点突出，把网站的标志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其他元素的放置。,3.9 网页的设计,