网站设计基本流程图

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

网站设计的基本流程图
网站制作过程有五个阶段:需求调查阶段,技术分析阶段,页面策划阶段,网站设计阶段,网站改进阶段。

流程图:
图1 需求调查阶段流程图
图2 技术分析阶段流程图
图3 页面策划阶段流程图
图4 网站设计阶段与网站改进阶段流程图
上述过程中,每个菱形标记的环节都是判断和选择的过程,并反馈信息,重复这个过程,直至满意后,进入下一个环节。

在信息高速发展的今天,信息管理已经成了一个公司管理的重要问题。

因此,有一套很好的信息管理模式,有一个综合信息网站就显的很重要了。

本文全面的分析了一个综合信息网站的结构、功能、用途以及对公司产生的重要影响,对网站的建设、维护和推广具有很好的指导作用。

一个综合信息网站,其功能主要体现在信息管理上面。

大中小型企业可以利用本网站进行企业内部人事管理、产品销售管理、产品生产管理、网上电子商务、对自己企业进行网上宣传、进行网上交流等。

其客户主要通过上网了解本公司的业务及产品情况,了解公司的人事状况,商业动态等。

对于一个企事业单位而言,它要进行各种综合业务,要及时了解企业内部的情况,要及时向外界公布信息,进行人事管理、进行产品销售、利润预算、与外界联系,因此,拥有一个综合信息网站是非常必要的。

用综合信息网站来对企业进行管理,进行电子商务是很必要的,有利于公司的发展,有利于提高公司的效益,有利于提高市场竞争力,有利于树立公司品牌形象,有利于扩大公司的影响力。

因此,本网站是可行的,建立本网站是必要的。

作为一个综合信息网站,本网站是可行的,虽然有些功能现在还不够完善,但就目前而言还是有很大的利用价值,以后我们还将把本网站做得更精,更完善。

一、系统概述二、系统需求分析三、系统功能分析与设计四、系统数据库设计五、系统运行维护及说明
六、网站结构与设计:七、网站栏目分析与设计八、网页界面和程序代码:九、网站界面:十、参考文献:
下面我们从几个方面来分析网易网站的设计思想:
一、架构
1、网站首页是兵家必争之地,每个频道负责人都想在显眼的位置推荐自己的产品或者资讯来增加曝光率,总是希望把所有东西一下子让用户看到,但最后我们就发现你放的东西越多,用户就根本找不到他想要的东西,快速离开的可能性很大。

在国内的门户网站都习惯了资讯多、页面长,什么都往首页堆,感觉内容越多会显的越大气,但用户的耐性是有限的,所以网页的通透性对国内网站很重要,每一屏的架构变化不宜太多,适当就好,主次内容信息位置保持一致性,不然用户每浏览到下一屏都需要重新去解读架构,思考该从那里开始阅读,不但用户的耐性被消耗掉还会增加用户的浏览成本,所以网站首页的架构必须清晰明了,保持较好的通透性,减少用户的浏览成本。

例如网易首页,采用三栏式结构,左栏为导航推荐区提供网易特色产品入口,中栏为主要资讯区,提供快速、全面、动态的各类新闻资讯,右栏为特色栏目区如博客、论坛等。

各栏的内容属性清晰,用户能快速找到他们需要的信息畅顺的浏览不需要多余的思考。

据研究分析用户浏览网页的视觉一般是从左到右、从上至下的一个浏览习惯。

网易网站的架构也在往这个方向改进,不断的提升用户体验。

网易资讯类页面大致可分为3类架构,下图是3类架构的视觉走向图。

据研究分析用户浏览网页的视觉一般是从左到右、从上至下的一个浏览习惯。

网易网站的架构也在往这个方向改进,不断的提升用户体验。

网易资讯类页面大致可分为3类架构,下图是3类架构的视觉走向图。

网易首页采用第一种架构,各频道首页例如新闻、体育、娱乐等采用第二种架构,新闻最终页采用第三种架构。

这样可使用户保持统一的视觉走向,无论浏览那个页面用户都知道他们需要的资讯在那里,符合用户浏览网页的习惯,减少用户浏览成本。

二、风格
时尚简单的外观设计和界面设计,也是受欢迎的其中原因之一,虽然网站设计不能称作为一件艺术创作,但用最少的元素设计出最好的作品这个也是网站设计中所追求目标之一。

能用一根线表现出效果就没有必要使用2根线,能用文字表示清楚的就不需要用图片。

页面设计如果使用过多装饰元素,会造成页面庞
大下载速度缓慢,不要高估网民的耐性,大部分网民都是没有耐性的。

浏览大量信息的时候需要一个简洁无阻碍的界面,过多的色彩和装饰反而会分散用户的注意力,影响到用户浏览效果和减少对资讯的点击。

网站需要用户看到的是网站提供的信息内容和服务而不是花俏的装饰(个性产品网站除外)。

这也是网易门户一直沿用简洁风格原因之一。

例如新改版的网易新闻,打破了以往条条框框的感觉,取消了多余的线框,界面更清晰简洁,资讯内容更突出。

三、信息排布
门户网站首页一般都会承载大量的资讯信息,密密麻麻的信息会让用户浏览网页的时候会产生压迫感,如何能让用户顺畅的浏览成为设计中重要的一环。

大家可以对比下面2张信息排布图,信息条数都是相同的但第一张信息排布图会让人感觉信息很清晰。

而第2张图会让用户感觉到信息排布有压迫感,可能还没有开始阅读就已经没有耐性了(忠诚度非常高的用户例外,但这类用户毕竟比较少)。

所以在信息排布的时候到达一定行数时需要用一些留空做到视觉隔离,让视觉上有透气的感觉。

门户网站可行性报告
所谓地方性门户网站是指立足于特定的区域市场,在一定的势力范围内具有一定影响力的网络站点。

区域门户网站涉及范围十分广泛,它可以是某地区某行业的龙头网站,也可以是某区域针对某一类客户群体的综合服务型网站。

在我国目前的社会市场网络构架中,各省市、县地方网站、区域旅游、餐饮服务网站,甚至是电子商务网,只要是针对某一特定区域的用户群体其实都是区域性网站的一种。

在互联网络高速发展的今天,网站正成为政府、企业、学校、社会团体及地方区域性产业进行形象展示、信息发布、业务拓展、客户服务、内部沟通等多项活动的重要阵地,她不仅仅具有快捷、无距离及随时随地可更新的特性,更能提供互动式交流功能,如留言板、会员制、讨论区等等,在为世人呈现良好的形象,增强在同行业中的竞争能力,开展业务提高效益等诸多方面扮演着其他载体所不可替代的重要角色。

为与行政区划对应的区域性网站,其地位从诞生之日起就是其他规模网站所无法比拟的。

因为任何一个企业或团体,都不可能在一个广泛的范围内赢取全部的受众,而这种市场竞争中变化多端的态势,就为区域性行业的发展提供了一个较好的生存空间。

一方面,它占据区域有利市场,以点带面,拥有得天独厚的地利优势,另一方面,它站点建设结构灵活,针对性强,在管理中能屈能伸,更加便于业务的实施和拓展。

即退可以守,赢得喘息的机会,进可以攻,扩展市场空间。

对于区域性企业和团体来说,营造自己的“根据地站点”对于自身的发展壮大具有十分重要的意义。

凭借一个便捷的宣传渠道,立足于一个有利的市场空间,只要操作得当,营销有力,区域性企业和团体不但可以在弱肉强食的残酷竞争中生存下去,而且还可以活得有滋有味!
网页设计页面大小分析
网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。

这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基本的表现是浏览器不出现横向滚动条,这几乎是目前的设计准则。

那么这里的一屏到底是多大呢?普通用户通常浏览网页时,其浏览网页的有效面积会受到下面几个方面的影响:1、显示器的分辨率这个由科技发展和用户购买力及喜好决定,其数据取决于统计。

2、操作系统毫无疑问目前是Windows的天下,其中WindowsXP占绝大多数。

3、网页浏览器IE依旧份额最高,但是Firefox、Opera和Safari等也有一定市场。

4、个人定制主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式,但是总体上这部分应该属于高级用户,绝大部分用户依旧会使用操作系统和浏览器的默认样式。

由关于浏览器和屏幕分辨率的统计数据可以得出:1、基本上用户分辨率都在800×600以上,绝大部分都在1024×768以上,从全球情况来看,800×600的分辨率会越来越少。

2、国内浏览器依旧是IE6的天下,这将会持续较长的时间。

从全球市场来看,国内的Fire ... 浏览器可视大小
网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。

这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基本的表现是浏览器不出现横向滚动条,这几乎是目前的设计准则。

那么这里的一屏到底是多大呢?普通用户通常浏览网页时,其浏览网页的有效面积会受到下面几个方面的影响:显示器的分辨率这个由科技发展和用户购买力及喜好决定,其数据取决于统计。

宽屏窄屏的网页宽度设置
1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。

2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。

3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右
4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB 或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象
5、1024*768 下网页的尺寸:width=955,height=600
800 * 600 下网页的尺寸:width=760,height=420
页面标准按800*600分辨率制作,实际尺寸为778*434px,
页面长度原则上不超过3屏,宽度不超过1屏.
每个标准页面为A4幅面大小,即8.5X11英寸
问:做网页一直用1003的,!这样在1024*768观看下刚好满屏不会出现横向滚动条!不明白为什么那么多人说是1002满屏不是1003满屏!难道我的两个显示器都有问题?
答:如果你应用了XP的主题效果后,在IE下的宽度就只有1000,而给XP去除所有效果后,IE的水平宽度就有1002了。

(仅以1024×768为例)
准网页广告尺寸规格
一、120*120,这种广告规格适用于产品或新闻照片展示。

二、120*60,这种广告规格主要用于做LOGO使用。

三、120*90,主要应用于产品演示或大型LOGO。

四、125*125,这种规格适于表现照片效果的图像广告。

五、234*60,这种规格适用于框架或左右形式主页的广告链接。

六、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。

七、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。

八、88*31,主要用于网页链接,或网站小型LOGO。

浅谈网页页面尺寸
关键字: 网页布局设计标准尺寸
网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计.
网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等.
高度:
高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。

宽度:
1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。

但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

2、在Firefox下,宽度的分率辨减19。

比如1024的宽度-19就变成1005
3、在Opear下,宽度的分率辨减23。

比如1024的宽度-23就变成1001
注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

所以如果是1024的分辨率,你的网页不如设成1000安全一点。

设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.如果是800的分辨率一般都设成770。

但也有设成760的.
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以800的分辨率一般设定760左右,1024的设定990左右.
网页设计标准尺寸
网页设计标准尺寸:
1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。

2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。

(在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了)
3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右
4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象.
页面标准按800*600分辨率制作,实际尺寸为778*434px
页面长度原则上不超过3屏,宽度不超过1屏
每个标准页面为A4幅面大小,即8.5X11英寸
全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px
另外120*90,120*60也是小图标的标准尺寸
每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K
标准网页广告尺寸规格
1、120*120,这种广告规格适用于产品或新闻照片展示。

2、120*60,这种广告规格主要用于做LOGO使用。

3、120*90,主要应用于产品演示或大型LOGO。

4、125*125,这种规格适于表现照片效果的图像广告。

5、234*60,这种规格适用于框架或左右形式主页的广告链接。

6、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。

7、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。

8、88*31,主要用于网页链接,或网站小型LOGO。

像素大小最大尺寸备注
广告形式
BUTTON a,120*60(必须用gif) b,215*50(必须用gif) 7K 7K
通栏760*100 430*50 25K 15K 静态图片或减少运动效果
超级通栏760*100 to 760*200 共40K 静态图片或减少运动效果
巨幅广告336*280 585*120 35K
竖边广告130*300 25K
全屏广告800*600 40K 必须为静态图片,FLASH格式
图文混排各频道不同15K
弹出窗口400*300(尽量用gif) 40K
BANNER 468*60(尽量用gif) 18K
悬停按钮80*80(必须用gif) 7K
流媒体300*200(可做不规则形状但尺寸不能超过300*200)30K 播放时间小于5秒60帧(1秒/12帧)
网页中的广告尺寸
1、首页右上,尺寸120*60
2、首页顶部通栏,尺寸468*60
3、首页顶部通栏,尺寸760*60
4、首页中部通栏,尺寸580*60
5、内页顶部通栏,尺寸468*60
6、内页顶部通栏,尺寸760*60
7、内页左上,尺寸150*60或300*300
8、下载地址页面,尺寸560*60或468*60
9、内页底部通栏,尺寸760*60 10、左漂浮,尺寸80*80或100*10011、右漂浮,尺寸80*80或100*100
以上几种说法可能有点小的出入,大家可以探讨一下。

IAB和EIAA发布新的网络广告尺寸标准
在这6种格式中,除了去年iab发布的4种“通用广告包”中的格式:160x600, 300x250, 180x150及728x90,还包括新公布的468x60 和120x600(擎天柱)2种。

英文字体
I.Amosis Technik(活泼)II.Hattenschweiler(肃穆)III.Patrician Sample(流畅)IV.SF Quantzite(庄重)V.SF Quartzite OutLine(衬托)VI.Arial(作特殊英文字体以示区别)
中文字体1.宋体2.黑体3.方正大标宋简体4.方正大黑简体5.华文行楷6.文鼎大标宋简7.文鼎粗圆简8.文鼎特粗宋简9.文鼎特粗圆简10.文鼎特圆简11.文鼎新艺体简12.方正粗倩体
应用场合:Banner:I,VI,4,7,8,9,11 Nav_button:1,2,7,10 公司英文名称:II,IV,VI 公司汉语名称:8,11,12。

相关文档
最新文档