网站设计原则
作者:admin 日期:2005-06-07
做网页,做网站也有一些日子,做得多了就会发现一些很细的东东,以下是我个人在做网页时都会比较注意的一些细节,当然为了能综合更多更好的经验技术,我还特意上网遛了一圈,把这些好的东东总结了一下,供大家相互学习交流之用,欢迎转载(请注明出处),若用不足之处,请多多包涵,并欢迎指正。
swf版下载地址:http://www.dezai.net/blog/work/webdesign.swf
PDF版下载地址:http://www.dezai.net/blog/work/webdesign.pdf
1、作为一个专业网站制作者需要具备什么知识
答:首先,你必须熟悉编写主页的标注语言HTML、熟悉W3C 的HTML 4.0规范、CSS层叠样式表的基本知识、javascript、VB Script的基本知识。对于常用的一些脚本程序如ASP、CGI也要有适当了解,但掌握多少不做要求。熟练使用至少一种所见即所得编辑工具和至少一种代码编辑器并部分了解多种编制工具的用法。熟练使用至少两种图形处理工具和至少一种动画制作工具以及至少一种的矢量绘图工具,并部分了解多种图形图像动画工具的基本用法。熟练使用至少一种FTP工具以及相应的软硬件和网络知识。
这些只是网站Shell建设中的一部分,但似乎少了一样东西,她也非常重要,就是一定的美感。对于色彩搭配和版面排列会起关键作用,不过这个东西比较模糊,而且因人而异,无法定制统一标准。
其次,你必须有非常强的自学能力,Internet发展千变万化,新的工具、技术层出不穷。例如目前新兴的Shockwave。网络上的两个月相当于我们生活中的一年,如果对于新的事物接纳不快,不能很快地掌握而停步不前,那么你很快将会被淘汰。
还有你的身体要比较好,熬夜已经是网络一族很正常的现象,有些工作或许逼你连夜赶工。如果身体不好,在高强度的工作下没几天就病倒了,那什么都谈不上了!
如果上面提到的那些你都具备的话,那么你一定会是一个非常优秀的Web Designer
2、网站设计的标准
不同人的观点看待页面的精美与否是有不同的标准(w3c除外)的,有些偏于美工精美,有些偏于功能强大,有些追求个性,有些则喜欢跟随潮流,但其实不管乍样,网站都有一个共同的功能,不是只做给个人看的,更多的是为了在别人面前展示自己的东东,所以个人认为做一个网站,最基本的是要实用、简洁、整体性好,能真正的形成一个属于自身网站的风格,保持一个整体的形象,配色均匀。这些应该是一个网站要做到的基本的要求了吧,做一个网站,首先还是要在脑子里构思好怎么才可以利用手中有限的资料(特别是企业网站)来设置好网站的主体色调,采用何种架构,如何配色搭配等一些因素,做到心中有底才开始动手。有些网页设计师比较在乎页面的“不拘一格”,但却忽视了网站的交互功能,一个页面设计再精美,别人使用不上里面的东东,也是白费的。我个人认为,真正好的设计师,应是在考虑到网站使用者的方便的同时,把自已的设计风格融入到作品中,能让客户感到满意才是OK的。总体来看吧,目标明确、定位正确 、主题鲜明、富有特色版式、编排布局合理、色彩和谐重点突出 、形式内容和谐统一 ,能做到这些应该就是一个很好的网站啦。
3、 网站设计要考虑的一些额外因素
就像不同的机子有不同的配置一样,在网站设计过程中,我们所要考虑的不仅仅就是页面设计,还要考虑到你的页面是否能在较快的时间内打开页面,如果一个页面等上个一两分钟,我想除非是您女朋友或漂亮MM网友的相片,要不你早就把它close了。拿一个门户网站设计来看,我们要考虑的是访问者的分辨率是1024*768还是640*480,是用PC机还是用Mac机,是用手机来看还是用PDA来看,是用中国电信来访问还是用中国网通来访问,是用ADSL来是用拨号上网,是仅仅面向国内用户还是要面向全球,是用IE6。0来访问还是用fox来访问等等这些因素.解决这些总是最好的办法是尝试采用DIV+CSS 来设计你的网站,从现在的趋势来看,WEB标准将是以后的发展之路,大家还是多点心学吧。
3、 网站的设计思路
上面说过,网站设计之前必须让自己有一个明确的思路,怎么执行怎么安排都要在动手前有个准备,最好能在此基础上能积累一些资料,以方便在动手时可以灵活运用,参考网上的教程,网站的设计思路一般是:
定位你的网站主题和名称→定位你的网站LOGO或相关形象标识→确定网站的栏目和频道→确定网站的目录结构和链接结构→确定网站的色调和采用的网站结构用相关字体→确定网站的风格和创意设计→设计首页和主要的子页面→设计网站的功能→检验网站,进行网站测试→投入使用
顺便提及g gh 一个企业网站的一般设计流程:
需求分析(项目立项 客户的需求说明书)系统分析 (网站总体设计 网站建设方案 网站详细设计)项目实施(整体形象设计 开发制作 调试完善)宣传推广→维护
4、 网站建设尺寸规范
页面标准按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
创建优秀网页的6个好习惯
5、不要将链接全部放在图像中 以往的网页中的链接都是文字,而且用下划线以资识别。但不久人们就讨厌了这些文字链接,于是都采用了图像链接。后来,更加嫌一个图像一个链接太麻烦了,于是将所有的链接都放进了一个图像中去。但并不是所有的用户都打开图像载入,如果你把所有的链接都放入图像中去,而没有任何同样功能的文字链接的话,用户也许会不知所措。
6、慎用自动滚动 曾经到过一个内容“丰富”的网页,它使用了很多常见的网页制作技巧:现在的时间、访问时的时间等等。不过有一个用得不是很好,就是窗口的自动滚动。我只是想发个邮件给网页的主人,但我却无法使滚动条停下来让我点击链接,于是我花了很久才“命中”窗口中的E-mail链接——真后悔军训的时候没有练好射击!
7、不要用延时效果的javascript 现在的网页制作者为了使网页更加具有影响力,都疯狂地加入javascript。以现在的“猫”奔跑的速度而言,这些脚本也算不了什么,用户不会介意。但是,如果这些脚本可能导致延时的话,用户的态度就不同了。某个国人网页的首页在载入时窗口的底色———窗口里面没有任何内容———由白色逐渐变成黑色,整个过程耗费了几秒,嘿!别小看这几秒,我能检查全部的邮箱了! 不要依赖浏览器 .太多的网站首页中加入了“请在800×600分辨率下使用IE浏览器浏览本网站”等字样的文字。我是安装了IE、NC和Opera,因为我要制作网页,需要它们来检验网页在这些浏览器下的可读性。但一般用户不会安装那么多的浏览器,更加不会牢记着哪个网站需要用哪个浏览器浏览。也许不可能让网页在使用所有的浏览器浏览都有一样的效果,但尽量地去达到该目的,会让网页在这个浏览器下有这样的特色、在另一个浏览器下又有不同的特色,这是网页制作者的工作,不是吗?
8、不要忘记版权 现在,网上侵犯知识产权的问题非常猖獗,某免费个人网页提供商上的网页尤其严重——甚至有盗版光盘贩卖呢!为此一些新的免费个人网页提供商就要求用户在申请时提交详细的、真实的个人资料,以防备不可预料的事情发生。所以,如果你的网页需要引用别人的东西的话,要么你就和他联系一下,征求意见;要么就在明显的位置注明其版权归属。这并非多余,这是你的网页“长寿”的秘方!当然,如果是你自己制作的图像或自己撰写的文章,你绝对有权声明版权归你自己所有!
9、不要懒于更新 某个个人网页聚居地上有很多的网页都是很久前建立而至今没有更新过的,姑且不说这是浪费公用资源的行为,访问过这些网页的人看到网页主人如此懒惰,你说他还会再去访问吗?谁能确定下次访问不会又是这般模样呢?因特网上的资源如此浩瀚,谁会去访问一个从不更新的网页呢?
网页设计禁忌
10、关于外观的禁忌
不要先决定网页的外观,然后强迫自己甚至是强迫别人去适应它。应该从网站的浏览者、网站要传达的信息以及网站的发展目标考虑,设计出一个最适合的网页架构。 不要每页都采用不同的背景图片,以免每次转页都要花时间去下载。采用相同的背景色及近似的按钮都能增加网页一致性,树立统一的风格。这也是最基本的网站VI设计(视觉识别系统)。 不要把图片的白色部分当作是透明的颜色,要知道别人的操作系统是并不一定会将底色设为白色的。解决的方法是把网页的底色设为白色。而最好的方法是用图片编辑工具为图片设置好透明底色。 底色或背景须与文字颜色形成明显对比,方便阅读。若你的网页里有较多文字,不妨在这方面下多点功夫,力求让浏览者能舒适阅读你的文章。 每页的排版不要太疏或用太大的字,尽量避免看网页的时候要作很大的卷动。 太长的一页要使用内部链接,聪明的网页设计者不会让浏览者在看网页时太多卷动。常见的内部链接例子如 FAQ、或名词解释。 在17寸显示器尚未普及的时候,不要以 800x600 以上的像素设计网页。因为这常常会导致设计上的判断失误。因此,无论你有再大的显示器,能上再大的分辨率,将显示器设置成 800x600的显示模式是适当的。 - 不要于每页插入太多的广告牌。相信你也不会喜欢贴满广告的网页。什么广告交换、点钱Banner、弹出窗口,还有时下最流行却又最讨厌的浮动广告,还是少放为妙。至少,当我看到的时候,是会第一时间按右上角的“X”的。
11、关于操守的禁忌
不要抄袭别人的创作。网络上的所有资料都是公开的,但都有版权的,若想引用别人的作品,不妨先征得同意,一般作者都只要你注明出处,对于电脑方面的东西,大多数朋友都是热情而慷慨的。更不要下载了别人的网站后,当作是自己的放在网上,这样做的结果是使所有人都知道你是个剽窃者。 引用 Newsgroup、BBS、或其他非电子传媒的文章,切记要注明原作者名称及文章事源,若引用别有的网页更要通知网主。尊重版权,避免官司,利人利已。 不要利用网页散布谣言、中伤他人,网络虽然难管理,但本着道德良心,都应洁身自爱。维持良好网络环境,要靠大家努力,从我做起。不要将别人的网页变成你的框架中的一个窗口,这样不仅为浏览者带来不便,令人的网页更丑陋,而且也侵犯了别人的版权,解决方法是采用链接中的 target 参数,如 target="_top" ,或是target="_blank" 从新窗口打开网页等。若重视访问者的感受请从每一细节做起。
12、不要把首页做成flash
真正的搜索引擎对图片的识别能力很差,首页做成flash,不仅不利于搜索引擎排名,而且还减慢了进入主页的速度,在一定程度上为你的客户尽快找到你又设置了一道小障碍。
13、不要把导航做成图片连接
因为搜索引擎是一个很大的数据库,而不是一个图片库,搜索引擎首页搜索引擎到的是你的标题,接着才通过你的导航系统搜索到你网站的其他内页,所以如果你的网站导航是文字连接,搜索引擎就很容易搜索到你其他的页面,是网站的整体形象得意完美展示,如果图片连接则不能达到这个效果。
14、不要用大量的图片组成首页
任何一个搜索引擎都喜欢结构明显,而不喜欢把网站做成一张皮,让搜索引擎分不清你的重点所在。
数据库开发
15、数据文件命名采用系统名+_+文件类型,比如系统名为kupage,则数据库文件命名为kupage_database.mdf,有的数据库文件有多个,比如SQL Server就有2个,一个是数据库文件,另一个是日志文件,那么他们的文件命名分别为kupage_database.mdf,kupage_log.log。文件名全部采用小写。
数据库表命名规范,表名长度不能超过30个字符,表名中含有单词全部采用单数形式,单词首写字母要大写,多个单词间不用任何连接符号。若库中有多个系统,表名采用系统名称+单词或多个单词,系统名是开发系统的缩写,系统名称全部采用小写英文字符,如bbsTitle,bbsForumType。若库中只含有一个系统,那么表名仅用一个单词或多个单词。单词选择能够概括表内容的一个或多个英文单词,如UserInfo,UserType。关连表命名规则为Re_表A_表B,Re是Relative的缩写,如:Re_User_ArticleType, Re_User_FormType。
数据库字段命名规范,数据库字段名全部采用小写英文单词,单词之间用”_”隔开,命名规则是表别名+单词,如:user_name,user_pwd。表别名规则,如果表名是一个单词,别名就取单词的前4 个字母;如果表名是两个单词,就各取两个单词的前两个字母组成4 个字母长的别名;如果表的名字由3 个单词组成,你不妨从头两个单词中各取一个然后从最后一个单词中再取出两个字母,结果还是组成4 字母长的别名。
视图名采用规则View_表A_表B_表C,View表示视图。这个视图由几个表产生就用”_”连接几个表的名,如果表过多可以将表名适当简化,但一定要列出所有表名。
存储过程命名规则P_表名_存取过程名(缩写),比如P_User_Del,P_ArticleType_AddData。
SQL语句编写规则,关键字必须大写,其他书写按上述命名规则,比如:
SELECT user_id, user_name FROM User WHERE user_id = ‘tom’
文件夹文件名命名规范
16、文件夹命名一般采用英文,长度一般不超过20个字符,命名采用小写字母。除特殊情况才使用中文拼音,一些常见的文件夹命名如:images(存放图形文件),flash(存放Flash文件),style(存放CSS文件),scripts(存放javascript脚本),inc(存放include文件),link(存放友情链接),media(存放多媒体文件)等。
文件名称统一用小写的英文字母、数字和下划线的组合。命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作 。
图片的命名原则名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名: banner
标志性的图片取名为: logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu
装饰用的照片我们取名: pic
不带链接表示标题的图片我们取名: title
动态语言文件命名规则性质_描述,描述可以有多个单词,用”_”隔开,性质一般是该页面得概要。
程序代码编程规范
一个良好的程序编码风格有利于系统的维护,代码也易于阅读查错。在此只讨论ASP的编程风格和约定。在ASP中所有变量是弱变量,无需定义就可以直接使用,而且代码不区分大小写。但其他语言一般这些都要定义的,为了养成良好的编程习惯,编写代码务必按照一下规则。
17、每个变量名必须定义,在ASP文件的最开始添加语句,强制定制每个变量。
18、程序代码需要有缩进,缩进采用键盘Tab键,不采用空格键。并且”=”或者链接字符串时需要左右空一格
19、函数过程编写的约定。函数或者过程命名采用动作+名词,每个函数需要给出相应的注释,函数功能,传入变量,以及作者和修改相关信息。
20、ASP内置对象区分大小写")
21、数据库连接一个库只能有一个数据库连接文件,创建数据库对象得原则是尽可能晚地打开数据库,尽可能早地关闭数据库。创建数据库对象调用统一地创建函数
22、当一个对象不在使用时要释放对象资源,。采用统一函数调用。
23、时间全部以字符串的形式保存到数据库中,这样做能够是日期在不同的数据库中都能良好地保存,也方便数据库地迁移。时间用14位字符串保存,日期用8位字符串保存。
网站制作过程中把握的几点
24、重点信息放在突出醒目的位置,整个网站空间排序适当 一个网站很重要的就是标题,标题就像路牌一样,人家在你的网站上逛来逛去,全靠它指路了。给人的第一印象是否能够马上注意到标题,标题要意义清晰、描述性强,把最吸引人的地方放在突出显眼的位置,然后再慢慢展开。或者说,把你的独特内容包裹成一个悬念,吸引人家注意。读者看一篇文章,前三段注意力最集中,如果这"寸土寸金"的前三段用不好,人家就要和你拜拜喽!留出可调整的位置,用于满足临时性或短期营销活动的宣传需要。如,福州电信局12月11日举办的"福建省首届信息网络展示会"展览,需要在网页中放在最突出的位置。这就需要调整原有的结构,既让新的内容有突出的体现,还要不至于淹没其他重点。在每屏中的文字与图形的布局既要考虑到重点的突出,还要给人以和谐的感觉。不能让图形淹没文字,也不能图形太少而让人觉得单调。视觉的吸引和诱惑力是不能低估的。
25、网页应该易懂,控制没个模块的信息量 网站设计最重要的诀窍,恐怕就是你的网页要易读。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果,别用花里胡哨的色彩组合,让人看起你的网页来很费劲。一般来说,浅色背景下的深色文字为佳。这个原则也意味着,你最好别把文字的规格设得太小、也不能太大。文字太小,人家读起来难受;文字太大,或者文字视觉效果变化频繁,像是冲着人大喊大叫,看起来不舒服。
另外,最好让文本左对齐,而不是居中。按当代中文的阅读习惯,文本大都居左的。当然,标题一般应该居中,因为这符合读者的阅读习惯。在内容上着笔尽量要细致,让人家能在最短的时间内,了解你想呈现给人家什么。给人家一幅清晰的画卷,别云山雾罩的。开门见山,直接了当。大家都知道,网友的耐心尤其少。你能提供的信息或许对他们有裨益,但如果要人家没完没了地翻下去才能找到,恐怕极少有人有这份耐心。立体规划内容,将所有部分按一定的构架各就其位、分别纳入不同层次的页面。注意先要把最重要的内容放到首页上,其他的依次就绪。然后,你就可以勾划页面蓝图、编HTML了。就文本内容的表现而言,记住尽量别让其一行文字的宽度,横跨整个屏幕。段落一多,这样子看起来很费劲,而且别人的浏览器还可能和你的差别很大。最好别超过屏幕宽度的一半。
26、网页页面越小越好,最好别超过50k,尽量精简 有研究显示,如果一个网站页面的主体在15秒之内显现不出来,访客会很快失去对该站的兴趣。当然,也有例外,比如内容实在太精彩,人家不去不行。再像视觉艺术类站点,也不能以"快"为唯一设计标准。不过,即使这类站点,也该在加个导引页,给读者一个提示,别不理睬人家的心情。但是大多数网站还是以内容为主,大部分人感兴趣的还是信息量,追求的是速度。要限定页面的大小,就得从各个角度考虑节省。最大的一头是图像,有的好东西,只得割爱了。想想看,在创意表达、品牌形象、挣钱几个目标之中,哪个最重要?
27、网站导航要清晰,容易查找, 所有的超链接应清晰无误地向读者标识出来,所有导航性质的设置,像图像按钮,都要有清晰的标识,让人看得明白,千万别光顾视觉效果的热闹的,而让人家不知东西南北链接文本的颜色最好用约定俗成的:未访问的,蓝色;点击过的,紫色或栗色。如果你一定要别出心裁,链接的文本就要想着以什么方式加以突出,比如说加粗体?加字号?两侧加竖标?或者几者兼用。总之,文本链接一定要和页面的其他文字有所区分,给读者清楚的导向。清晰导航还要求:读者进入目的页的点击次数,不能超过三次。如果三次以上还找不到,人家可就没有耐心陪你玩了!
28、网站内容非富 网站作为一种媒体,提供给用户的最主要还是网站的内容,没有人会在一个没内容的网站上留连往返,就象没人会两次看同一份毫无新意的报纸一样!
29、页面下载速度快 据研究发现,页面下载速度是网站留住访问者的关键因素,如果20—30秒还不能打开一个网页,一般人就会没有耐心。如果不能让每个页面都保持较快的下载速度,至少应该确保主页速度尽可能快。在目前的情况下,保持页面下载速度的主要方法是让网页简单,仅将最重要的信息安排在首页,尽量避免使用大量的图片。虽然大量使用文字降低了网页的视觉效果,显得有些呆板,不过根据加拿大最近一项“网民网上看什么”的调查显示,互联网用户92%的上网时间用来看文字资讯。
30、功能多样、使用方便 网站吸引用户访问的基本目的无非是出于几个方面:扩大网站知名度和吸引力;将潜在顾客转化为实际顾客;将现有顾客发展为忠诚顾客等。为用户提供一个多功能的人性化界面,并保持这种功能的使用方便,就显得十分重要,说到底用户使用一种服务----不管在网上网下------最主要的是方便。包括方便的导航系统、必要的帮助信息、常见问题解答、尽量简单的用户注册程序等等。
31、网站品质优秀 网页上的错误链接常常是人们对网站抱怨的主要因素之一。我们时常可以看到“该网页已被删除或不能显示”、“Filenotfound”等由于无效链接而产生的反馈信息,这种情况往往让人觉得难以忍受,同时也严重影响了用户对网站的信心。如果网站同时可以提供800免费服务电话和callcenter等联系方式,相信不仅可以体现公司的实力,而且更能充分体现出良好的顾客服务。
32、保护个人信息 在个性化服务十分普及的今天,许多网站要求用户首先注册为会员,网站收集用户资料有何目的?如何利用用户的个人信息?是否将用户资料出售给其它机构?是否会利用个人信息向用户发送大量的广告邮件?用户是否对此拥有选择的权利?填写的个人信息是否安全?是否能获得必要的回报?这些都是用户十分关心的问题,如果网站对此没有明确的说明和承诺,这样的网站显然缺乏必要的商业道德,或者至少可以被认为对用户不够尊重。
制作网页诀窍
33、预早筹划 设计主页未必很艰难。但这一工作与编制传统的宣传品一样,都需要我们谨慎处理和筹划。换言之,我们必须首先确定自己需要传达的主要信息,然后细意斟酌、把所有意念合情合理地组织起来;之后是设计一个页面式样,试用于有代表性的用户,接着重复修订,务求尽善尽美。
34、主页上的颜色最好不超过六十四种,页顶图像最好保持在大约10KB(千字节)以下。切勿禁不住诱惑。觉得非要放入大幅的图画不可;应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。
35、善用图像 用户在网上四处漫游,你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力,所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款,使其别具特色,令人过目不忘。图像的内容应有一定的实际作用,切忌虚饰浮夸。最佳的图像足集美观与传讯于一身。 注意图画可以弥补文字之不足,但并不能够完全取代文字。 很多用户把浏览软件设定为略去图像,以求节省时间他们只看文字。用纯文本模式测试已制成的主页,确保其传达到所有信息。
36、使主页易于漫游 主页的其中一个主要功能是作为漫游工具,指引用户查阅你存储在网址或其他地点的信息。尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑,主页上的联接项目应只限于几个高级的类别,例如公司、产品、服务、支援等。 用六至八个联接项目最为理想。 此外,你提供的信息不应埋藏在重重叠叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此,你必须在广度和深度之间求取平衡。如果你的网址上有太多信息,你可能要编制较长的页面或使用更多联接项目,甚至可能要建立多个主页、使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息,肯定受用户欢迎。
39、循环利用现有信息 制作主页(或其他主页)时,通常都毋须从头做起,因为有许多现成的文字、图画等资料可供我们重用,例如宣传小册、公关文件、技术手册、资料库等。很多情况下,只要用少许功夫、就可把这些材料转到网页上使用。
41、贯彻诺言 做不到的事情,千万不要轻易承诺。切勿随便叫用户作出回应行动,例如要求用户填交订贷表格,除非你已制订好处理这些订单的方法和交货程序。如果在网上列出联络电话、就要确保自己能够迅速解决来电者的问题。
42、吸引用户浏览 既然绞尽脑汁把主页弄得美观实用,没有人来欣赏就太可惜了。为吸引所有网中人来浏览,必须使主页易于寻找。 通知其他网站(例如题材相关的网站),他们可能想联通你的主页。安排将自己的网址列在所有相关的网址目录、索引、查找程序和?What? s new?页面上。尽量将网址传播开去,使之出现在 Internet和所有传统煤体上、例如书刊广告、公关文件、宣传品等。 在网站上,于每个页面设置home按键,方便用户随时返回主页。 万维网充满生命力、正在不断演进,所以一些现时适用的经验,将来未必合用。举例来说,将来家居用户有高速线路接驳Internet,就可以消除数据传输目前的所受的限制、使主页的篇幅可以更长,页面更华丽。新的浏览功能、例如Sun的 HotJava测览软件所提供的先进功能、将使万维网更强劲和更方便沟通。 HotJava将主页由静态的文件转为动态的实体,提供诸如即时制作动画、背景音乐、即时存入资料(例如不断更新股票价格)、话音广播等功能、为网上用户带来更多乐趣。
创建一个Flash站点的十大技巧
43、记住用户的目标 用户往往带着目的访问一个站点,每个链接,每次点击都要合乎他们的经验并且引导他们通向他们的目标。当传输你的页面时,应该让关键的导航链接首先装载——万一用户想转到网站其它的区域。模仿通常的用户图形界面往往可以增加可用性。
44、记住网站的目的 网站设计应该反应商业或者客户的需求,有效的传播主要信息与促进品牌。然而网站的目标最好通过尊重用户的习惯来达到,所以站点结构必须满足用户的需要,快速的将用户引导至其目标而避免任何公司和区域行话。
45、避免没有必要的介绍 虽然介绍的动画非常精彩,但是它们往往延误了用户访问他们正在寻找的信息。应该经常提供给用户一个忽略介绍的命令或者访问你的主页的选择,当他们第二次访问您的主页时,对所有的用户都应该忽略简介动画(使用客户端的javascript来完成这个功能),然后在目标页面提供返回到动画页面的选择。
46. 提供合乎逻辑的导航与交互 保证用户的导航: 显示用户访问过的上一个地址和他即将访问的下一个地址. 通过链接的不同颜色在用户访问后提醒他们访问过的页面. 提供用户一个轻松跳出他们正在访问的部分回到出发点的的链接. 明确说明每个链接的位置. 保证链接的结构和命名法的可视性,而不是隐藏它们直到用户触发了某个事件(比如鼠标移近). 确保按钮定义了足够好的反应区域. 利用Flash流的特性首先装载主要的导航元素. 确保导航的后退按钮. 为了做到这一点可以使用浏览器内置的前进和后退导航系统,将Flash影片逻辑的分成几块并置于独立的HTML页面中. 做为一种选择, 为影片建立一个基于Flash的后退按钮以便用户可以利用它后退到一个包含上一个访问页面的场景或桢.
47、设计的连贯性 提高您的站点性能的最好方法是用户界面的一致性. 元素结构的再使用,元素的设计以及命名的习惯将使用户在导向他们的目标时对站点传达的信息的注意力更加丰富, 而且这也有利于站点的维护. 你可以在整个站点中使用小影片(Smart Clip)来重复使用交互元素, 还可以让最初导航系统的文字和图片在目标页面中重新使用.
48、不要过度使用动画 避免不必要的动画. 最好的动画应该是可以增加站点的设计目标的动画, 在导航的时候讲述一个故事或者有帮助的事情. 在包含大量文字的页面使用重复的动画将使视线从消息转移.
49、 慎重使用声音 声音可以为你的站点锦上添花但是绝对不是必要的. 例如:使用声音来说明用户刚刚触发了一个时间. 确保使用了声音的开关与音量调节方法, 并且要记住声音会显著的增加文件的大小. 当你确实使用了声音的时候,Macromedia Flash会将声音转换为MP3文件甚至流媒体化.
50、 面向低带宽的用户 越少的下载越好. 初始的下载页面大小不能超过40K, 包括所有Macromedia文件,图像和HTML文件. 为了减少下载时间, 使用矢量图形(除非图像使压缩过的BMP, 那样最好仍保持为BMP格式), 并且只有在用户确定的要用到某个文件时才使用Load Movie动作. 如果用户必须等待, 提供一个装载的时间序列与进度条, 只要可能,必须在前5秒内装载导航系统.
51、设计的易用性 确保你的站点的内容能被所有的用户阅读, 包括那些残疾用户. 高度使用ALT标签可以确保网站内容能被辅助工具解释. 影片的可缩放性是让更多用户了解网站内容的另一项易用的Macromedia特色. 如果需要一个彻底的Macromedia Flash内容可用性的讨论,请登陆Macromedia Flash可用性网站.
52、可用性测试 让一些新手来访问站点并同时完成用户目标与站点目标. 甚至简短的Macromedia Flash动画都有可能阻挡用户实现目标, 所以使用Macromedia Flash的带宽模拟器(Bandwidth Profiler——译者注)(在视图菜单的测试影片模式下)来分析站点在不同带宽模式下的性能.每次 重复测试影片哪怕是很小的改动. 确保站点的测试者从人口统计学上合乎站点的预定用户—特别是预定用户中有对站点的导航有不同级别的满意程度.
网站设计小技巧
53、做好网页的分区,确定网页以哪个分辨率为标准(1024*768 640*480)
54、对于网站页面50页以上的应该采用网站搜索功能
55、若一篇文章很长,就不要把内容都放在一起,要采用分页形式,一行句子的长度在一般在500-600pixes,行间距为160%,反之,若内容较少,则可以加入图片进行补充说明.
56、根据内容的重要性,按次序排列各个内容.
57、如果没有特殊的原因,一般按照通用模式来设计网站的框图
58、不要使用没有内容的空菜单,页面风格要保持一致
59、尽可能的采取CSS来定义网站的风格,网站首页的CSS样式一般不采用外部调用,但其它页面则最好采用外部调用CSS方式
60、网站所有的文件夹和文件名都应该以英文命名,并且都应该是小写
61、文件名最好采用英语来命名而不是采用拼音来命名,文件名应简洁,图片文件和动画文件命名能看懂就可以了,能采用常用文件名的尽量采用,如index, add, up,detele,modify,foot ,head等.
62、首页及频道一般定义为index,组件名称,函数名称,过程名称要有意义.
63、置标的属性要使用引号,置标要注意换行和缩进两个半角空格,图片的width height等到属性要等于图片的真实大小.
64、最好使用CSS样式表定义字体大小,页面中尽量使用相对路径,书写代码时要区分大小写,在无规定时尽量采用小写字母书写代码
65、文件的标题属性声明最好填补完整,在书写代码过程中,最好把重复的内容做成共用文件若做成模块。
66、尽量使用CSS样式表来定义行距,常用的两个行距的值是line-height:120%/150%.,避免使用
来换行,最好使用,避免使用
68、.不要在每一页使用风格不同的图标,不必在页面上填满图像来增加视觉趣味,尽量使用彩色圆点...它们较小并能够为列表项增加彩色活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。
69、不要让访问者不知所措,不必非要用声音和图像充斥网页,也不要把文件做得太长,使用图像时要谨慎;大的图像显然会降低页面建立的速度,但许多需要顺序装载的小图像也会如此;
70、对用作背景的GIF要谨慎。它们可以使一个页面看起来很有趣,甚至很专业,但是装饰背景很容易使文字变得不可辨读,要把背景做得好,光有颜色对比是不够的。背景要么很亮(文字较暗)要么很暗(文字较亮)。如果背景含图像,对比度要较低才不至于过于分散读者的注意力。
71、不要把重要的内容放到页尾--有些读者可能不会往下看那么远,不要让什么东西看起来像是一个按钮却不起按钮的作用。
72、从头至尾都要使用导航图标,尤其是要用“返回到首页”连接,可以在每部份都做这样做。比如在每页的顶端(或底部)都有一小串图标,第一个回到首页,第二个回到章,第三个回到节。、在页面上应该有一些连接帮助访问者来回跳转,总是以相同的格式把这些连接放到所有页面上,这样读者就总能知道哪儿去找到它们以及怎样使用它们
73、请不要在网页中连续出现多于一个的 也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
74、在网站根目录中开设images、common、temp 三个子目录,根据需要再开设media 子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等;common 子目录中放css、js、php、include 等公共文件;temp 子目录放客户提供的各种文字图片等等原始资料;media 子目录中放flash、avi、quick time 等多媒体文件。
75、尽快学会CSS样式表,尽快运用Web标准来设计页面(DIV+CSS)
附:常去的一些学习论坛
国内知名设计论坛网址:
蓝色理想 http://www.blueidea.com
设计联盟 http://www.chinadu.org
中国UI网 http://www.chinaui.com
视觉中国 http://www.chinavisual.com
闪客帝国 http://www.flashempire.com
闪吧 http://www.flash8.net
5D多媒体 http://www.5d.cn
国内知名开发网站:
CSDN http://www.csdn.net
Codelphi http://blog.codelphi.com
Chinauinix http://www.chinaunix.net
博客园 http://www.cnblogs.com
IECN http://www.iecn.net
QQ:30756159MSN:eastjazz@hotmail.com
Email:eastjazz@sohu.comURL:http://www.dezai.net
Blog:http://www.dezai.net/blog/
swf版下载地址:http://www.dezai.net/blog/work/webdesign.swf
PDF版下载地址:http://www.dezai.net/blog/work/webdesign.pdf
1、作为一个专业网站制作者需要具备什么知识
答:首先,你必须熟悉编写主页的标注语言HTML、熟悉W3C 的HTML 4.0规范、CSS层叠样式表的基本知识、javascript、VB Script的基本知识。对于常用的一些脚本程序如ASP、CGI也要有适当了解,但掌握多少不做要求。熟练使用至少一种所见即所得编辑工具和至少一种代码编辑器并部分了解多种编制工具的用法。熟练使用至少两种图形处理工具和至少一种动画制作工具以及至少一种的矢量绘图工具,并部分了解多种图形图像动画工具的基本用法。熟练使用至少一种FTP工具以及相应的软硬件和网络知识。
这些只是网站Shell建设中的一部分,但似乎少了一样东西,她也非常重要,就是一定的美感。对于色彩搭配和版面排列会起关键作用,不过这个东西比较模糊,而且因人而异,无法定制统一标准。
其次,你必须有非常强的自学能力,Internet发展千变万化,新的工具、技术层出不穷。例如目前新兴的Shockwave。网络上的两个月相当于我们生活中的一年,如果对于新的事物接纳不快,不能很快地掌握而停步不前,那么你很快将会被淘汰。
还有你的身体要比较好,熬夜已经是网络一族很正常的现象,有些工作或许逼你连夜赶工。如果身体不好,在高强度的工作下没几天就病倒了,那什么都谈不上了!
如果上面提到的那些你都具备的话,那么你一定会是一个非常优秀的Web Designer
2、网站设计的标准
不同人的观点看待页面的精美与否是有不同的标准(w3c除外)的,有些偏于美工精美,有些偏于功能强大,有些追求个性,有些则喜欢跟随潮流,但其实不管乍样,网站都有一个共同的功能,不是只做给个人看的,更多的是为了在别人面前展示自己的东东,所以个人认为做一个网站,最基本的是要实用、简洁、整体性好,能真正的形成一个属于自身网站的风格,保持一个整体的形象,配色均匀。这些应该是一个网站要做到的基本的要求了吧,做一个网站,首先还是要在脑子里构思好怎么才可以利用手中有限的资料(特别是企业网站)来设置好网站的主体色调,采用何种架构,如何配色搭配等一些因素,做到心中有底才开始动手。有些网页设计师比较在乎页面的“不拘一格”,但却忽视了网站的交互功能,一个页面设计再精美,别人使用不上里面的东东,也是白费的。我个人认为,真正好的设计师,应是在考虑到网站使用者的方便的同时,把自已的设计风格融入到作品中,能让客户感到满意才是OK的。总体来看吧,目标明确、定位正确 、主题鲜明、富有特色版式、编排布局合理、色彩和谐重点突出 、形式内容和谐统一 ,能做到这些应该就是一个很好的网站啦。
3、 网站设计要考虑的一些额外因素
就像不同的机子有不同的配置一样,在网站设计过程中,我们所要考虑的不仅仅就是页面设计,还要考虑到你的页面是否能在较快的时间内打开页面,如果一个页面等上个一两分钟,我想除非是您女朋友或漂亮MM网友的相片,要不你早就把它close了。拿一个门户网站设计来看,我们要考虑的是访问者的分辨率是1024*768还是640*480,是用PC机还是用Mac机,是用手机来看还是用PDA来看,是用中国电信来访问还是用中国网通来访问,是用ADSL来是用拨号上网,是仅仅面向国内用户还是要面向全球,是用IE6。0来访问还是用fox来访问等等这些因素.解决这些总是最好的办法是尝试采用DIV+CSS 来设计你的网站,从现在的趋势来看,WEB标准将是以后的发展之路,大家还是多点心学吧。
3、 网站的设计思路
上面说过,网站设计之前必须让自己有一个明确的思路,怎么执行怎么安排都要在动手前有个准备,最好能在此基础上能积累一些资料,以方便在动手时可以灵活运用,参考网上的教程,网站的设计思路一般是:
定位你的网站主题和名称→定位你的网站LOGO或相关形象标识→确定网站的栏目和频道→确定网站的目录结构和链接结构→确定网站的色调和采用的网站结构用相关字体→确定网站的风格和创意设计→设计首页和主要的子页面→设计网站的功能→检验网站,进行网站测试→投入使用
顺便提及g gh 一个企业网站的一般设计流程:
需求分析(项目立项 客户的需求说明书)系统分析 (网站总体设计 网站建设方案 网站详细设计)项目实施(整体形象设计 开发制作 调试完善)宣传推广→维护
4、 网站建设尺寸规范
页面标准按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
创建优秀网页的6个好习惯
5、不要将链接全部放在图像中 以往的网页中的链接都是文字,而且用下划线以资识别。但不久人们就讨厌了这些文字链接,于是都采用了图像链接。后来,更加嫌一个图像一个链接太麻烦了,于是将所有的链接都放进了一个图像中去。但并不是所有的用户都打开图像载入,如果你把所有的链接都放入图像中去,而没有任何同样功能的文字链接的话,用户也许会不知所措。
6、慎用自动滚动 曾经到过一个内容“丰富”的网页,它使用了很多常见的网页制作技巧:现在的时间、访问时的时间等等。不过有一个用得不是很好,就是窗口的自动滚动。我只是想发个邮件给网页的主人,但我却无法使滚动条停下来让我点击链接,于是我花了很久才“命中”窗口中的E-mail链接——真后悔军训的时候没有练好射击!
7、不要用延时效果的javascript 现在的网页制作者为了使网页更加具有影响力,都疯狂地加入javascript。以现在的“猫”奔跑的速度而言,这些脚本也算不了什么,用户不会介意。但是,如果这些脚本可能导致延时的话,用户的态度就不同了。某个国人网页的首页在载入时窗口的底色———窗口里面没有任何内容———由白色逐渐变成黑色,整个过程耗费了几秒,嘿!别小看这几秒,我能检查全部的邮箱了! 不要依赖浏览器 .太多的网站首页中加入了“请在800×600分辨率下使用IE浏览器浏览本网站”等字样的文字。我是安装了IE、NC和Opera,因为我要制作网页,需要它们来检验网页在这些浏览器下的可读性。但一般用户不会安装那么多的浏览器,更加不会牢记着哪个网站需要用哪个浏览器浏览。也许不可能让网页在使用所有的浏览器浏览都有一样的效果,但尽量地去达到该目的,会让网页在这个浏览器下有这样的特色、在另一个浏览器下又有不同的特色,这是网页制作者的工作,不是吗?
8、不要忘记版权 现在,网上侵犯知识产权的问题非常猖獗,某免费个人网页提供商上的网页尤其严重——甚至有盗版光盘贩卖呢!为此一些新的免费个人网页提供商就要求用户在申请时提交详细的、真实的个人资料,以防备不可预料的事情发生。所以,如果你的网页需要引用别人的东西的话,要么你就和他联系一下,征求意见;要么就在明显的位置注明其版权归属。这并非多余,这是你的网页“长寿”的秘方!当然,如果是你自己制作的图像或自己撰写的文章,你绝对有权声明版权归你自己所有!
9、不要懒于更新 某个个人网页聚居地上有很多的网页都是很久前建立而至今没有更新过的,姑且不说这是浪费公用资源的行为,访问过这些网页的人看到网页主人如此懒惰,你说他还会再去访问吗?谁能确定下次访问不会又是这般模样呢?因特网上的资源如此浩瀚,谁会去访问一个从不更新的网页呢?
网页设计禁忌
10、关于外观的禁忌
不要先决定网页的外观,然后强迫自己甚至是强迫别人去适应它。应该从网站的浏览者、网站要传达的信息以及网站的发展目标考虑,设计出一个最适合的网页架构。 不要每页都采用不同的背景图片,以免每次转页都要花时间去下载。采用相同的背景色及近似的按钮都能增加网页一致性,树立统一的风格。这也是最基本的网站VI设计(视觉识别系统)。 不要把图片的白色部分当作是透明的颜色,要知道别人的操作系统是并不一定会将底色设为白色的。解决的方法是把网页的底色设为白色。而最好的方法是用图片编辑工具为图片设置好透明底色。 底色或背景须与文字颜色形成明显对比,方便阅读。若你的网页里有较多文字,不妨在这方面下多点功夫,力求让浏览者能舒适阅读你的文章。 每页的排版不要太疏或用太大的字,尽量避免看网页的时候要作很大的卷动。 太长的一页要使用内部链接,聪明的网页设计者不会让浏览者在看网页时太多卷动。常见的内部链接例子如 FAQ、或名词解释。 在17寸显示器尚未普及的时候,不要以 800x600 以上的像素设计网页。因为这常常会导致设计上的判断失误。因此,无论你有再大的显示器,能上再大的分辨率,将显示器设置成 800x600的显示模式是适当的。 - 不要于每页插入太多的广告牌。相信你也不会喜欢贴满广告的网页。什么广告交换、点钱Banner、弹出窗口,还有时下最流行却又最讨厌的浮动广告,还是少放为妙。至少,当我看到的时候,是会第一时间按右上角的“X”的。
11、关于操守的禁忌
不要抄袭别人的创作。网络上的所有资料都是公开的,但都有版权的,若想引用别人的作品,不妨先征得同意,一般作者都只要你注明出处,对于电脑方面的东西,大多数朋友都是热情而慷慨的。更不要下载了别人的网站后,当作是自己的放在网上,这样做的结果是使所有人都知道你是个剽窃者。 引用 Newsgroup、BBS、或其他非电子传媒的文章,切记要注明原作者名称及文章事源,若引用别有的网页更要通知网主。尊重版权,避免官司,利人利已。 不要利用网页散布谣言、中伤他人,网络虽然难管理,但本着道德良心,都应洁身自爱。维持良好网络环境,要靠大家努力,从我做起。不要将别人的网页变成你的框架中的一个窗口,这样不仅为浏览者带来不便,令人的网页更丑陋,而且也侵犯了别人的版权,解决方法是采用链接中的 target 参数,如 target="_top" ,或是target="_blank" 从新窗口打开网页等。若重视访问者的感受请从每一细节做起。
12、不要把首页做成flash
真正的搜索引擎对图片的识别能力很差,首页做成flash,不仅不利于搜索引擎排名,而且还减慢了进入主页的速度,在一定程度上为你的客户尽快找到你又设置了一道小障碍。
13、不要把导航做成图片连接
因为搜索引擎是一个很大的数据库,而不是一个图片库,搜索引擎首页搜索引擎到的是你的标题,接着才通过你的导航系统搜索到你网站的其他内页,所以如果你的网站导航是文字连接,搜索引擎就很容易搜索到你其他的页面,是网站的整体形象得意完美展示,如果图片连接则不能达到这个效果。
14、不要用大量的图片组成首页
任何一个搜索引擎都喜欢结构明显,而不喜欢把网站做成一张皮,让搜索引擎分不清你的重点所在。
数据库开发
15、数据文件命名采用系统名+_+文件类型,比如系统名为kupage,则数据库文件命名为kupage_database.mdf,有的数据库文件有多个,比如SQL Server就有2个,一个是数据库文件,另一个是日志文件,那么他们的文件命名分别为kupage_database.mdf,kupage_log.log。文件名全部采用小写。
数据库表命名规范,表名长度不能超过30个字符,表名中含有单词全部采用单数形式,单词首写字母要大写,多个单词间不用任何连接符号。若库中有多个系统,表名采用系统名称+单词或多个单词,系统名是开发系统的缩写,系统名称全部采用小写英文字符,如bbsTitle,bbsForumType。若库中只含有一个系统,那么表名仅用一个单词或多个单词。单词选择能够概括表内容的一个或多个英文单词,如UserInfo,UserType。关连表命名规则为Re_表A_表B,Re是Relative的缩写,如:Re_User_ArticleType, Re_User_FormType。
数据库字段命名规范,数据库字段名全部采用小写英文单词,单词之间用”_”隔开,命名规则是表别名+单词,如:user_name,user_pwd。表别名规则,如果表名是一个单词,别名就取单词的前4 个字母;如果表名是两个单词,就各取两个单词的前两个字母组成4 个字母长的别名;如果表的名字由3 个单词组成,你不妨从头两个单词中各取一个然后从最后一个单词中再取出两个字母,结果还是组成4 字母长的别名。
视图名采用规则View_表A_表B_表C,View表示视图。这个视图由几个表产生就用”_”连接几个表的名,如果表过多可以将表名适当简化,但一定要列出所有表名。
存储过程命名规则P_表名_存取过程名(缩写),比如P_User_Del,P_ArticleType_AddData。
SQL语句编写规则,关键字必须大写,其他书写按上述命名规则,比如:
SELECT user_id, user_name FROM User WHERE user_id = ‘tom’
文件夹文件名命名规范
16、文件夹命名一般采用英文,长度一般不超过20个字符,命名采用小写字母。除特殊情况才使用中文拼音,一些常见的文件夹命名如:images(存放图形文件),flash(存放Flash文件),style(存放CSS文件),scripts(存放javascript脚本),inc(存放include文件),link(存放友情链接),media(存放多媒体文件)等。
文件名称统一用小写的英文字母、数字和下划线的组合。命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作 。
图片的命名原则名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名: banner
标志性的图片取名为: logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu
装饰用的照片我们取名: pic
不带链接表示标题的图片我们取名: title
动态语言文件命名规则性质_描述,描述可以有多个单词,用”_”隔开,性质一般是该页面得概要。
程序代码编程规范
一个良好的程序编码风格有利于系统的维护,代码也易于阅读查错。在此只讨论ASP的编程风格和约定。在ASP中所有变量是弱变量,无需定义就可以直接使用,而且代码不区分大小写。但其他语言一般这些都要定义的,为了养成良好的编程习惯,编写代码务必按照一下规则。
17、每个变量名必须定义,在ASP文件的最开始添加语句,强制定制每个变量。
18、程序代码需要有缩进,缩进采用键盘Tab键,不采用空格键。并且”=”或者链接字符串时需要左右空一格
19、函数过程编写的约定。函数或者过程命名采用动作+名词,每个函数需要给出相应的注释,函数功能,传入变量,以及作者和修改相关信息。
20、ASP内置对象区分大小写")
21、数据库连接一个库只能有一个数据库连接文件,创建数据库对象得原则是尽可能晚地打开数据库,尽可能早地关闭数据库。创建数据库对象调用统一地创建函数
22、当一个对象不在使用时要释放对象资源,。采用统一函数调用。
23、时间全部以字符串的形式保存到数据库中,这样做能够是日期在不同的数据库中都能良好地保存,也方便数据库地迁移。时间用14位字符串保存,日期用8位字符串保存。
网站制作过程中把握的几点
24、重点信息放在突出醒目的位置,整个网站空间排序适当 一个网站很重要的就是标题,标题就像路牌一样,人家在你的网站上逛来逛去,全靠它指路了。给人的第一印象是否能够马上注意到标题,标题要意义清晰、描述性强,把最吸引人的地方放在突出显眼的位置,然后再慢慢展开。或者说,把你的独特内容包裹成一个悬念,吸引人家注意。读者看一篇文章,前三段注意力最集中,如果这"寸土寸金"的前三段用不好,人家就要和你拜拜喽!留出可调整的位置,用于满足临时性或短期营销活动的宣传需要。如,福州电信局12月11日举办的"福建省首届信息网络展示会"展览,需要在网页中放在最突出的位置。这就需要调整原有的结构,既让新的内容有突出的体现,还要不至于淹没其他重点。在每屏中的文字与图形的布局既要考虑到重点的突出,还要给人以和谐的感觉。不能让图形淹没文字,也不能图形太少而让人觉得单调。视觉的吸引和诱惑力是不能低估的。
25、网页应该易懂,控制没个模块的信息量 网站设计最重要的诀窍,恐怕就是你的网页要易读。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果,别用花里胡哨的色彩组合,让人看起你的网页来很费劲。一般来说,浅色背景下的深色文字为佳。这个原则也意味着,你最好别把文字的规格设得太小、也不能太大。文字太小,人家读起来难受;文字太大,或者文字视觉效果变化频繁,像是冲着人大喊大叫,看起来不舒服。
另外,最好让文本左对齐,而不是居中。按当代中文的阅读习惯,文本大都居左的。当然,标题一般应该居中,因为这符合读者的阅读习惯。在内容上着笔尽量要细致,让人家能在最短的时间内,了解你想呈现给人家什么。给人家一幅清晰的画卷,别云山雾罩的。开门见山,直接了当。大家都知道,网友的耐心尤其少。你能提供的信息或许对他们有裨益,但如果要人家没完没了地翻下去才能找到,恐怕极少有人有这份耐心。立体规划内容,将所有部分按一定的构架各就其位、分别纳入不同层次的页面。注意先要把最重要的内容放到首页上,其他的依次就绪。然后,你就可以勾划页面蓝图、编HTML了。就文本内容的表现而言,记住尽量别让其一行文字的宽度,横跨整个屏幕。段落一多,这样子看起来很费劲,而且别人的浏览器还可能和你的差别很大。最好别超过屏幕宽度的一半。
26、网页页面越小越好,最好别超过50k,尽量精简 有研究显示,如果一个网站页面的主体在15秒之内显现不出来,访客会很快失去对该站的兴趣。当然,也有例外,比如内容实在太精彩,人家不去不行。再像视觉艺术类站点,也不能以"快"为唯一设计标准。不过,即使这类站点,也该在加个导引页,给读者一个提示,别不理睬人家的心情。但是大多数网站还是以内容为主,大部分人感兴趣的还是信息量,追求的是速度。要限定页面的大小,就得从各个角度考虑节省。最大的一头是图像,有的好东西,只得割爱了。想想看,在创意表达、品牌形象、挣钱几个目标之中,哪个最重要?
27、网站导航要清晰,容易查找, 所有的超链接应清晰无误地向读者标识出来,所有导航性质的设置,像图像按钮,都要有清晰的标识,让人看得明白,千万别光顾视觉效果的热闹的,而让人家不知东西南北链接文本的颜色最好用约定俗成的:未访问的,蓝色;点击过的,紫色或栗色。如果你一定要别出心裁,链接的文本就要想着以什么方式加以突出,比如说加粗体?加字号?两侧加竖标?或者几者兼用。总之,文本链接一定要和页面的其他文字有所区分,给读者清楚的导向。清晰导航还要求:读者进入目的页的点击次数,不能超过三次。如果三次以上还找不到,人家可就没有耐心陪你玩了!
28、网站内容非富 网站作为一种媒体,提供给用户的最主要还是网站的内容,没有人会在一个没内容的网站上留连往返,就象没人会两次看同一份毫无新意的报纸一样!
29、页面下载速度快 据研究发现,页面下载速度是网站留住访问者的关键因素,如果20—30秒还不能打开一个网页,一般人就会没有耐心。如果不能让每个页面都保持较快的下载速度,至少应该确保主页速度尽可能快。在目前的情况下,保持页面下载速度的主要方法是让网页简单,仅将最重要的信息安排在首页,尽量避免使用大量的图片。虽然大量使用文字降低了网页的视觉效果,显得有些呆板,不过根据加拿大最近一项“网民网上看什么”的调查显示,互联网用户92%的上网时间用来看文字资讯。
30、功能多样、使用方便 网站吸引用户访问的基本目的无非是出于几个方面:扩大网站知名度和吸引力;将潜在顾客转化为实际顾客;将现有顾客发展为忠诚顾客等。为用户提供一个多功能的人性化界面,并保持这种功能的使用方便,就显得十分重要,说到底用户使用一种服务----不管在网上网下------最主要的是方便。包括方便的导航系统、必要的帮助信息、常见问题解答、尽量简单的用户注册程序等等。
31、网站品质优秀 网页上的错误链接常常是人们对网站抱怨的主要因素之一。我们时常可以看到“该网页已被删除或不能显示”、“Filenotfound”等由于无效链接而产生的反馈信息,这种情况往往让人觉得难以忍受,同时也严重影响了用户对网站的信心。如果网站同时可以提供800免费服务电话和callcenter等联系方式,相信不仅可以体现公司的实力,而且更能充分体现出良好的顾客服务。
32、保护个人信息 在个性化服务十分普及的今天,许多网站要求用户首先注册为会员,网站收集用户资料有何目的?如何利用用户的个人信息?是否将用户资料出售给其它机构?是否会利用个人信息向用户发送大量的广告邮件?用户是否对此拥有选择的权利?填写的个人信息是否安全?是否能获得必要的回报?这些都是用户十分关心的问题,如果网站对此没有明确的说明和承诺,这样的网站显然缺乏必要的商业道德,或者至少可以被认为对用户不够尊重。
制作网页诀窍
33、预早筹划 设计主页未必很艰难。但这一工作与编制传统的宣传品一样,都需要我们谨慎处理和筹划。换言之,我们必须首先确定自己需要传达的主要信息,然后细意斟酌、把所有意念合情合理地组织起来;之后是设计一个页面式样,试用于有代表性的用户,接着重复修订,务求尽善尽美。
34、主页上的颜色最好不超过六十四种,页顶图像最好保持在大约10KB(千字节)以下。切勿禁不住诱惑。觉得非要放入大幅的图画不可;应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。
35、善用图像 用户在网上四处漫游,你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力,所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款,使其别具特色,令人过目不忘。图像的内容应有一定的实际作用,切忌虚饰浮夸。最佳的图像足集美观与传讯于一身。 注意图画可以弥补文字之不足,但并不能够完全取代文字。 很多用户把浏览软件设定为略去图像,以求节省时间他们只看文字。用纯文本模式测试已制成的主页,确保其传达到所有信息。
36、使主页易于漫游 主页的其中一个主要功能是作为漫游工具,指引用户查阅你存储在网址或其他地点的信息。尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑,主页上的联接项目应只限于几个高级的类别,例如公司、产品、服务、支援等。 用六至八个联接项目最为理想。 此外,你提供的信息不应埋藏在重重叠叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此,你必须在广度和深度之间求取平衡。如果你的网址上有太多信息,你可能要编制较长的页面或使用更多联接项目,甚至可能要建立多个主页、使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息,肯定受用户欢迎。
39、循环利用现有信息 制作主页(或其他主页)时,通常都毋须从头做起,因为有许多现成的文字、图画等资料可供我们重用,例如宣传小册、公关文件、技术手册、资料库等。很多情况下,只要用少许功夫、就可把这些材料转到网页上使用。
41、贯彻诺言 做不到的事情,千万不要轻易承诺。切勿随便叫用户作出回应行动,例如要求用户填交订贷表格,除非你已制订好处理这些订单的方法和交货程序。如果在网上列出联络电话、就要确保自己能够迅速解决来电者的问题。
42、吸引用户浏览 既然绞尽脑汁把主页弄得美观实用,没有人来欣赏就太可惜了。为吸引所有网中人来浏览,必须使主页易于寻找。 通知其他网站(例如题材相关的网站),他们可能想联通你的主页。安排将自己的网址列在所有相关的网址目录、索引、查找程序和?What? s new?页面上。尽量将网址传播开去,使之出现在 Internet和所有传统煤体上、例如书刊广告、公关文件、宣传品等。 在网站上,于每个页面设置home按键,方便用户随时返回主页。 万维网充满生命力、正在不断演进,所以一些现时适用的经验,将来未必合用。举例来说,将来家居用户有高速线路接驳Internet,就可以消除数据传输目前的所受的限制、使主页的篇幅可以更长,页面更华丽。新的浏览功能、例如Sun的 HotJava测览软件所提供的先进功能、将使万维网更强劲和更方便沟通。 HotJava将主页由静态的文件转为动态的实体,提供诸如即时制作动画、背景音乐、即时存入资料(例如不断更新股票价格)、话音广播等功能、为网上用户带来更多乐趣。
创建一个Flash站点的十大技巧
43、记住用户的目标 用户往往带着目的访问一个站点,每个链接,每次点击都要合乎他们的经验并且引导他们通向他们的目标。当传输你的页面时,应该让关键的导航链接首先装载——万一用户想转到网站其它的区域。模仿通常的用户图形界面往往可以增加可用性。
44、记住网站的目的 网站设计应该反应商业或者客户的需求,有效的传播主要信息与促进品牌。然而网站的目标最好通过尊重用户的习惯来达到,所以站点结构必须满足用户的需要,快速的将用户引导至其目标而避免任何公司和区域行话。
45、避免没有必要的介绍 虽然介绍的动画非常精彩,但是它们往往延误了用户访问他们正在寻找的信息。应该经常提供给用户一个忽略介绍的命令或者访问你的主页的选择,当他们第二次访问您的主页时,对所有的用户都应该忽略简介动画(使用客户端的javascript来完成这个功能),然后在目标页面提供返回到动画页面的选择。
46. 提供合乎逻辑的导航与交互 保证用户的导航: 显示用户访问过的上一个地址和他即将访问的下一个地址. 通过链接的不同颜色在用户访问后提醒他们访问过的页面. 提供用户一个轻松跳出他们正在访问的部分回到出发点的的链接. 明确说明每个链接的位置. 保证链接的结构和命名法的可视性,而不是隐藏它们直到用户触发了某个事件(比如鼠标移近). 确保按钮定义了足够好的反应区域. 利用Flash流的特性首先装载主要的导航元素. 确保导航的后退按钮. 为了做到这一点可以使用浏览器内置的前进和后退导航系统,将Flash影片逻辑的分成几块并置于独立的HTML页面中. 做为一种选择, 为影片建立一个基于Flash的后退按钮以便用户可以利用它后退到一个包含上一个访问页面的场景或桢.
47、设计的连贯性 提高您的站点性能的最好方法是用户界面的一致性. 元素结构的再使用,元素的设计以及命名的习惯将使用户在导向他们的目标时对站点传达的信息的注意力更加丰富, 而且这也有利于站点的维护. 你可以在整个站点中使用小影片(Smart Clip)来重复使用交互元素, 还可以让最初导航系统的文字和图片在目标页面中重新使用.
48、不要过度使用动画 避免不必要的动画. 最好的动画应该是可以增加站点的设计目标的动画, 在导航的时候讲述一个故事或者有帮助的事情. 在包含大量文字的页面使用重复的动画将使视线从消息转移.
49、 慎重使用声音 声音可以为你的站点锦上添花但是绝对不是必要的. 例如:使用声音来说明用户刚刚触发了一个时间. 确保使用了声音的开关与音量调节方法, 并且要记住声音会显著的增加文件的大小. 当你确实使用了声音的时候,Macromedia Flash会将声音转换为MP3文件甚至流媒体化.
50、 面向低带宽的用户 越少的下载越好. 初始的下载页面大小不能超过40K, 包括所有Macromedia文件,图像和HTML文件. 为了减少下载时间, 使用矢量图形(除非图像使压缩过的BMP, 那样最好仍保持为BMP格式), 并且只有在用户确定的要用到某个文件时才使用Load Movie动作. 如果用户必须等待, 提供一个装载的时间序列与进度条, 只要可能,必须在前5秒内装载导航系统.
51、设计的易用性 确保你的站点的内容能被所有的用户阅读, 包括那些残疾用户. 高度使用ALT标签可以确保网站内容能被辅助工具解释. 影片的可缩放性是让更多用户了解网站内容的另一项易用的Macromedia特色. 如果需要一个彻底的Macromedia Flash内容可用性的讨论,请登陆Macromedia Flash可用性网站.
52、可用性测试 让一些新手来访问站点并同时完成用户目标与站点目标. 甚至简短的Macromedia Flash动画都有可能阻挡用户实现目标, 所以使用Macromedia Flash的带宽模拟器(Bandwidth Profiler——译者注)(在视图菜单的测试影片模式下)来分析站点在不同带宽模式下的性能.每次 重复测试影片哪怕是很小的改动. 确保站点的测试者从人口统计学上合乎站点的预定用户—特别是预定用户中有对站点的导航有不同级别的满意程度.
网站设计小技巧
53、做好网页的分区,确定网页以哪个分辨率为标准(1024*768 640*480)
54、对于网站页面50页以上的应该采用网站搜索功能
55、若一篇文章很长,就不要把内容都放在一起,要采用分页形式,一行句子的长度在一般在500-600pixes,行间距为160%,反之,若内容较少,则可以加入图片进行补充说明.
56、根据内容的重要性,按次序排列各个内容.
57、如果没有特殊的原因,一般按照通用模式来设计网站的框图
58、不要使用没有内容的空菜单,页面风格要保持一致
59、尽可能的采取CSS来定义网站的风格,网站首页的CSS样式一般不采用外部调用,但其它页面则最好采用外部调用CSS方式
60、网站所有的文件夹和文件名都应该以英文命名,并且都应该是小写
61、文件名最好采用英语来命名而不是采用拼音来命名,文件名应简洁,图片文件和动画文件命名能看懂就可以了,能采用常用文件名的尽量采用,如index, add, up,detele,modify,foot ,head等.
62、首页及频道一般定义为index,组件名称,函数名称,过程名称要有意义.
63、置标的属性要使用引号,置标要注意换行和缩进两个半角空格,图片的width height等到属性要等于图片的真实大小.
64、最好使用CSS样式表定义字体大小,页面中尽量使用相对路径,书写代码时要区分大小写,在无规定时尽量采用小写字母书写代码
65、文件的标题属性声明最好填补完整,在书写代码过程中,最好把重复的内容做成共用文件若做成模块。
66、尽量使用CSS样式表来定义行距,常用的两个行距的值是line-height:120%/150%.,避免使用
来换行,最好使用
或text-indent属性来处理首行缩进
67、表格的嵌套尽量控制在三层内,网页内绝对不允许使用一张大表格,不允许用空的
68、.不要在每一页使用风格不同的图标,不必在页面上填满图像来增加视觉趣味,尽量使用彩色圆点...它们较小并能够为列表项增加彩色活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。
69、不要让访问者不知所措,不必非要用声音和图像充斥网页,也不要把文件做得太长,使用图像时要谨慎;大的图像显然会降低页面建立的速度,但许多需要顺序装载的小图像也会如此;
70、对用作背景的GIF要谨慎。它们可以使一个页面看起来很有趣,甚至很专业,但是装饰背景很容易使文字变得不可辨读,要把背景做得好,光有颜色对比是不够的。背景要么很亮(文字较暗)要么很暗(文字较亮)。如果背景含图像,对比度要较低才不至于过于分散读者的注意力。
71、不要把重要的内容放到页尾--有些读者可能不会往下看那么远,不要让什么东西看起来像是一个按钮却不起按钮的作用。
72、从头至尾都要使用导航图标,尤其是要用“返回到首页”连接,可以在每部份都做这样做。比如在每页的顶端(或底部)都有一小串图标,第一个回到首页,第二个回到章,第三个回到节。、在页面上应该有一些连接帮助访问者来回跳转,总是以相同的格式把这些连接放到所有页面上,这样读者就总能知道哪儿去找到它们以及怎样使用它们
73、请不要在网页中连续出现多于一个的 也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
74、在网站根目录中开设images、common、temp 三个子目录,根据需要再开设media 子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等;common 子目录中放css、js、php、include 等公共文件;temp 子目录放客户提供的各种文字图片等等原始资料;media 子目录中放flash、avi、quick time 等多媒体文件。
75、尽快学会CSS样式表,尽快运用Web标准来设计页面(DIV+CSS)
附:常去的一些学习论坛
国内知名设计论坛网址:
蓝色理想 http://www.blueidea.com
设计联盟 http://www.chinadu.org
中国UI网 http://www.chinaui.com
视觉中国 http://www.chinavisual.com
闪客帝国 http://www.flashempire.com
闪吧 http://www.flash8.net
5D多媒体 http://www.5d.cn
国内知名开发网站:
CSDN http://www.csdn.net
Codelphi http://blog.codelphi.com
Chinauinix http://www.chinaunix.net
博客园 http://www.cnblogs.com
IECN http://www.iecn.net
QQ:30756159MSN:eastjazz@hotmail.com
Email:eastjazz@sohu.comURL:http://www.dezai.net
Blog:http://www.dezai.net/blog/
评论: 1 | 引用: 978 | 查看次数: 70535
发表评论