《(最新整理)网页设计经验》由会员分享,可在线阅读,更多相关《(最新整理)网页设计经验(32页珍藏版)》请在金锄头文库上搜索。
1、( (最新整理最新整理) )网页设计经验网页设计经验网页设计经验 2009-6-10 16:59:461.内容和功能决定表现形式和界面设计要先了解:建站目的 栏目规划及每个栏目的表现形式及功能要求 主色、客户性别喜好、联系方式、旧版网址、偏好网址 根据行业和客户要求,那些要着重表现 是否分期建设、考虑后期的兼容性 客户是否有强烈的建站欲望 你是否能在精神意识上控制住客户 面对你未接触的技术知识,你有底吗? 2.模块化和可修改性强模块化不仅可以提高重用性,也能统一网站风格,还可以降低程序开发的强度。这里就设计一些尺寸、模数、宽容度、命名规范等等知识了,无论是架构还是模块或图片,都要考虑可修改性强
2、。一般即能清晰又保证美观的字体字号有几类:宋体 12px | 宋体 12px 粗体 | 宋体 14px | 宋体 14px 粗体 | 黑体 20px | verdana 9px | Arial Black 12px+ |3.网页配色基本概念 白纸黑字是永远的主题,谁都说不出不好来。 网页最常用流行色兰色蓝天白云,沉静整洁的颜色。 绿色绿白相间,雅致而有生气。 橙色活泼热烈,标准商业色调。 暗红宁重、严肃、高贵,需要配黑和灰来压制刺激的红色, 颜色的忌讳忌脏背景与文字内容对比不强烈,灰暗的背景令人沮丧! 忌纯艳丽的纯色对人的刺激太强烈抗议,缺乏内涵。 忌跳再好看的颜色,也不能脱离整体。脱离群众是
3、自取其辱! 忌花要有一种主色贯穿其中,主色并不时面积最大的颜色,而是最重要,最能揭示和反映主题的颜色,就象领导者一样,虽然在人数上居少数,但起决定作用。 忌粉颜色浅固然显的干净,但如果对比过弱,整得苍白无力了,就象病夫一样无可救药。 蓝色忌纯,绿色忌黄,红色忌艳 几种固定搭配蓝白橙蓝为主调。白底,蓝标题栏,橙色按钮或 ICON 做点缀。 绿白兰绿为主调。白底,绿标题栏,兰色或橙色按钮或 ICON 做点缀。 橙白红橙为主调。白底,橙标题栏,暗红或桔红色按钮或 ICON做点缀。 暗红黑暗红主调。黑或灰底,暗红标题栏,文字内容背景为浅灰色。 4. 网页设计理念 内容决定形式先把内容充实上,再分区块,
4、再定色调,再处理细节。 先整体,后局部,最后回归到整体。全局考虑,把能填上的都填上,占位置。然后定基调,分模块设计。最后调整不满意的几个局部细节。 功能决定设计方向看网站的用途,决定设计思路.商业性的就要突出赢利目的;政府型的就要突出形象和权威性的文章;教育性的,就要突出师资和课程。5.界面弱化一个好的界面设计它的界面时弱化的,它突出的是功能,着重体现的是网站业提供给使用者是主要什么。这就涉及到浏览顺序、功能分区等等。要让访客在 0.5 内就能把握网站的行业性质,1 秒内就知道该从哪个地方开始使用这个网站,能点一此的,绝不点第二次。v 一个设计良好的网页应该能够被宽带网上的多媒体高档电脑或者依
5、然使用慢速 MODEM 连接的低档电脑上安装的浏览器阅读。然而,很多新的网站设计者均不是非常的了解如何尽量的让这些 HTML 文件保持很好的兼容性。 当然,这里有太多的不确定因素影响网页最后呈现的结果。首先,计算机的显示器有不同的分辨率和显示质量,其次,运行着各种各样的操作系统,使用着不通版本的 WEB 浏览器 ,不同 INTERNET 连接方式和各种速度的 MODEM。我们不能想当然的去武断地判定浏览者的喜好。我们还是花点时间来测试页面,这样可以让每一个访问者感到愉快。然而,遗憾的是我们没有办法为每一个访问者来优化页面,但是下面讲述的几个步骤将有助于您保证大多数访问者的浏览效果。 1、确定受
6、众。 一般的来说,绝大多数普通受众图形,插件,applets 和其它有关的高级 Web 浏览器特性。对我们来说,页面的实用可能比漂亮更重要,对于用户来说,没有什么比页面能够快速下载更重要了,简而言之,精简你的站点,这是一条最佳的捷径。 波士顿一位图形设计者兼美术讲师说:“你必须考虑什么,这一切都应该来自自于你的观众“! 为了让每个人满意,一个站点的实用比漂亮更加重要。并且首先,它必须能够快速的被用户端的较老版本的浏览器快速解释。简化你的站点,然而,那未必是最好的办法。 考虑一下站点访问者的操作系统,监视器,浏览器,和的连接类型。然后,想想理论上他们需要从你的站点获得什么?他们是想获得连接还是需
7、要实际的内容?如果是普通的站点是否会失望,是否需要为浏览下载特别的插件。有一个窍门就是没有必要为每一个人优化你的站点,要满足每一个访问者显然不可能,你必须为访问者采取适当的技术。 2、不要依赖图形。 就站点设计而言,的确能够通过成功的图形设计招徕或者丢失访问者。并非所有的访问者可以完全看到图片,某些人为了加快存取网络的速度已经关闭了浏览器端的图形。简而言之,图形并不能正确的在客户端加载。 然而,图形经常被用来作为导航按钮。举例来说,访问者经常按向左的箭头返回上一页,或者一个包含问号的图形可以得到更多的信息,或者按公司的标志(LOGO)会告诉用户公司的地址和电话号码。图形映射(IMAGE MAP
8、)允许你按图像的不同区域连接到不同的地方,这个经常被用来用作站点地图,你给访问者提供站点内容指引。但是如果你仅仅通过图片来提供站点导航的话,某些访问者将不能完全或者正确的离开你的站点。 总是告诉用户你的站点需要什么样类型的技术才能正确浏览你的网站是一个非常愚笨的方法。如果访问者需要安装插件才能处理,如果你仅仅给出一个连接让访问者去下载。这个自认为非常酷的页面对用户来说根本不是什么幽默的事情,这是和用户的期待所恰恰相反的。至于为什么恰恰相反,希望你能反思一下,如果是你,你会为了浏览一个你根本不知道什么样的站点而去下载一堆你不知道的插件么? 如何解决这个矛盾呢?你可能想到的解决方法有二种:一个是单
9、纯的文本,另外就是完全的图形方式。其实不然。如果你使用一个图形映射的方式给内容列表,可以在该页的最后使用一个纯文本方式的表格来处理,这样会好很多。如果使用图形按钮,最好还是包括简单的导航文字提示。 大多数的时候,通常我们要养成使用“ALT“标记的习惯,这样当图形未能正确显示的时候可用预备的文本替代显示。这样,用户至少可以看到关于这个图形的表述,便知道这个图形究竟意味着什么。举例来说某个图象标记的预备文本就可以这样写: 使用“ALT“标记也有另外一个好处。文字将显示在图象的上面,这样会给用户造成一个页面快说引导的感觉。 3、保持页面小巧。 这个小节我们谈论的是关于图形的处理。最好的方法是我们呼吁
10、广大的读者保持让图形文件的尺寸尽量的小。即使是那些侥幸拥有快速 Internet 连接的用户,他们不会抱怨说你的站点加载速度太快。 2004-10-6 11:05 回复 sandy8 0 位粉丝 2 楼第一个基本原则是让每一个图形文件的尺寸小于 30KB。这绝对不是一个坏的建议。更“极端“的某些页面设计专家说,保持整个页面的尺寸大概在 30KB, 40KB 左右(也就是包含图形和文本以及其它多媒体对象之后的整个页面)才是比较合适的。并忠告我们“千万不要使用非常大的页面“。 要保持页面尺寸小巧,花些时间来处理一下图形,在保证图形质量的情况下使用尽量高的压缩比例,让图形尽量的小。 另外,让图形使用
11、较少的色彩也是一个让图形尽量小的办法。使用单调的颜色比使用梯度的颜色要好。使用梯度颜色可以在浏览器端快速填充颜色调色板供客户端显示。此外,减少图形的色彩深度进而可以使用较少的色彩树也是可以的。 如果你需要提供较大的图象和多媒体文件,尽量不要插入页面里面,提供一个连接就可以了。这样,如果使用快速的连接点击图象就可以立刻看到,低速的连接不看图象也可以看到他最关心的内容,浏览感觉上没有什么延迟是最好的。 4、不要假设用户的显示器和分辨率大小。 一个常见的错误的是好多的网页设计师都认为访问者都有一个他们一样显示效果良好的大屏幕显示器。按照目前的状况,你可以为你的站点优化设计为标准的 800600 分辨
12、率,这是现在主流显示器的的默认显示分辨率。 搜索引擎,比如 Excite,我们可以发现一些为增加大量用户访问量的好主意。举例来说,多使用表格单元格颜色填充。该页的网页设计师为该网页添加了背景色,这样用户就不会在感觉上觉得下载页面耗费的时间过多。另外,大多数的显示器只能显示 256 色,而不是设计师所使用的真彩上百万种颜色设置。浏览器能显示的颜色在浏览器“安全色彩范围“,即 256 色以内。后面我们将详细讨论这个问题。 5、小心使用插件(plug-ins)和 Applets。 突出交互性或者多媒体特性的站点通常使用 plug-ins 和applets。Plug-ins 是 Web 浏览器功能的扩
13、展。浏览者如果安装了Plug-ins,他们就能够运行不同类型的文件,比如动画,视频和音频。Applets 是小的程序片断或者是工具,经常用 Java 语言编写,可以借助诸如浏览器这样的大型程序完成一些有用的功能。 虽然 plug-ins 和 applets 能大大增强站点的交互性和多媒体性能,但是对于一些较老配置的机器来说,这无疑又是一个多余的功能。举例来说,Java applets 仅能工作在 32 位的操作系统下,Windows 3.x 就行不通(虽然现在很少有人使用了)。另外,plug-ins 需要花费时间下载安装,但并不是每一个用户都能熟练的完成下载后安装这样一个过程。不熟练的用户安装
14、 plug-ins 的时候可能会遇到故障,不熟练的用户不需要这样的烦恼。 如果你判断你的受众可以安装 plug-ins 和 applets,你必须要在相关的部分提示用户,下载 plug-ins 和 applets 的时间和地址,并且安装过程中需要注意哪些方面的内容。这样可以方便用户的使用。如果是非常重要的信息,建议你提供一个可用的如纯文本型的可用信息,以方便那些确实无法安装 plug-ins 和 applets 的访问者。6、仅仅在需要的时候使用帧(FRAME)。 使用帧可以把一个浏览器分成几个不同的窗口,对于站点的结构的把握是一个不错的方法。但是,你还是必须知道,还是有人在使用不支持帧的浏览
15、器。在你开始打算设计一个帧的时候,你该仔细的考虑考虑你是否的确真的需要。经常,你这样的需求可以通过表格来组织站点的结构。当然,有些特别特别老的浏览器的确连表格也不支持。哎,这样说来,我 们似乎真的是没有办法了。 如果你必须使用帧,设法为还在使用那些古董浏览器的用户提供其它的解决办法。最坏的打算就是,如果真的没有办法解决,给这些用户一些道歉的信息,不要让他们感觉到你忽视了他们的存在。7、不要忘记 Web 浏览器。 你应该知道,最终的浏览者有很多的方法可以控制网页在客户端浏览器的显示效果(包括字体大小,颜色等等),不过从市场占有率来看,网景公司的航海家(Navigator)相比微软公司的探险家(I
16、nternet Explorer)的份额正逐渐减小。 2004-10-6 11:05 回复 sandy8 0 位粉丝 3 楼对一个指定的站点来说,如果考虑到某些访问者不喜欢使用图形方式的导航条,测试的时候你就需要关闭图形显示。所以,在制作的时候,你就必须要考虑到大部分(不是全部,当是至少应该考虑到导航条图形)的图形必须要使用文字提示,这样即使在浏览者客户端不显示导航图片的时候还有文字给予适当的提示,这样的感觉,会好很多,至少面对无法显示图形的红叉而言,这样的文字提示就给人以友好的感觉二不至于无所适从。 事实上,微软公司出品的 WEB 探险家和美国 Netscape 公司航海家已经有越来越多的相似之处了,其实,早在一年前,他们之间的兼容已经不是一个大问题了。但是在细节上还是有区别的,某些在某个浏览器看上去的效果用另外一个浏览器看就完全不是那么一回事了。你可以理解这些差别,但是你无法支配他,不同的浏览器看上去就是不同,就象不同的人眼里的某个人各自会有不同的印象一样。你所需要的,就是知道他们存在差别,你应该