制作一个优秀的网站 它应该注意哪几点
2011-01-27 12:14:50 来源：WEB开发网核心提示：如何才能让网站更优秀，更适合W3C标准及具有良好的用户体验，制作一个优秀的网站 它应该注意哪几点，这是很多网页制作人员都面临的问题，也是 大家都想知道的东西，请用不同主流浏览器测试一下您的页面，确保您的网站都能正常运行，netgather站长在长期的实践工作中终结了下面几点，希望能给大家带来帮助
如何才能让网站更优秀，更适合W3C标准及具有良好的用户体验，这是很多网页制作人员都面临的问题，也是 大家都想知道的东西，netgather站长在长期的实践工作中终结了下面几点，希望能给大家带来帮助，不足之处请批评指正。
1. 领会网站的主题，明确网站里展示的内容以及大部分浏览群体情况
想建一个网站，并且是一个对用户有用的网站，首先就应该考虑网站的内容以及网站功能，用户需要什么? 他们怎么快捷方便的找到想要的东西?作为一个网站设计师在整个设计的时候都应该围绕这个方面来进行。如果用户不能够迅速得到他们想要的东西，或是你的网站操作不便捷，那么这个网站就是失败的 。用户就会失望而去，可能永远都不会再登录你的网站。一个小例子：如果你想做了一个股票方面的网站，但网站的字体 大小都是12px的字，你想想，现在退休在家的老人，炒股的人数可不是一个小数目，就算你的网站内容再好再精辟，他们也不可能拿着放大镜对着显示器看你的网站吧，结果只是让你流失了大批的用户。
2.合理的颜色搭配
对于一个网页设计师，设计的过程是痛苦的也是快乐的，明确要做一个什么样的网站之后，要把主题更合理的体现出来都会经过一个选色和排版的过程。个人认为，如果不是做一个超弦的个性化网站，那么颜色搭配 并非是一件难事。第一，明确主色。其实颜色的行业特性并不很重，只是人们对一个行业的感知才造成了行业与颜色搭配的关联，比如做一个宾仪馆网站，当然不能能红色，为什么?其实归根于人的感知，因为 我们都认为红色是种喜庆的颜色，因而与宾仪馆不相符。像蓝色一般用在科技或技术型网站较好，粉红用在女性化方面的网站较好等。第二，辅色和点睛色，一个网站主体颜色确认，还须辅色和点睛色，辅色较多采用同种色彩搭配和邻近色彩搭配。同种色彩搭配就是按主色改变其透明度、饱和度、变淡或加深页得来，邻近色彩搭配就是按主色取色环上相邻的颜色，如红色与橙色。点睛色一般与主色相差较大，一般用在网页比较重要的内容或按钮，其作用为吸引用户视线、清楚网页给人视觉的疲劳，点睛色合理使用，避免太多的出 现，否则就会适得其反。
3.良好的网页布局
网页布局应该把握的要素是主次分明、协调整洁、尊重用户的视觉习惯，合理按排内容。把用户想要的东西 尽可能的首先展示在眼前，同时注意潜在的引导用户行为。俗话说：好记性不如烂笔头，在设计一个网站界面的时候，我们应该先用铅笔勾画出网站的排版草图，达到理想的效果后再用制图软件加以制作和修饰。细节决定成败，在设计效果图之中，尽量少用大的色块、突出导航、版块分明，以达到干净简洁整齐协调的效果。比如导航条适当加入鼠标效果;网页线条避免色差太大;轮廓阴影别太明显，若有若无最好;适当图文并茂;网页版块间距大小合理且统一;同级别文字样式统一;尊重日常生活物理特性达到逼真的效果(比如光照那边变亮，那边稍淡，再如一条彩带绕过一物体，转折处应该稍有突出且有细微圆角阴影)……
当网页效果图制作确认完后，我们就要着手html页面的制作了。
4.网页title及meta
网页的title及meta应该跟根基不出栏目及内容页而定，切勿全站使用一种的形式，keyWords可不用加，对搜索引擎作用不大，头部标签避免关键字堆切。
5.h1—h6标签的使用
一个网页h1标签只能用一次。在一个网站的首页、频道页、列表页，h1标签可以分别用于网站的名称、频道名称、栏目列表名称，但在一个网站的文章详情页，h1标签一定要用在文章标题上。h2—h6标签可以在一个页面重复使用，依次遵守网站层次结构。
6.CSS文件
尽量从外部用link导入css文件，写一个自己经常使用的重设css样式reset.css。避免使用*{}。一种样式写在一行，减小文件大小，能用class定义的尽量使用而减少用id定义，尽量避免针对不同浏览器而使用的css hack技巧，万不得己而为之。
7.背景图的优化
除网站实际内容之外框架使用的图片，尽量定义在css文件中，根据实际，尽可能把背景图合并，以提高加载速度。最好不要使一张很小很小的图片平铺一个较大的范围。
8.div+css布局，减小页面嵌套
用div+css布局目的就是为了减小页面代码，使网站结构层次化分明，内容与表现形式能分离。减小嵌套不只对搜索引擎友好，也有利于减小页面大小更方便后期维护修改。
9.优化页面js
能合并的js文件合并成一个，减少大规模循环和过多的层级引用，提高提高加载和运行速度。
10.避免死链接及空连接
对用户而言，如果点击一篇他们想要的文章打开的是“该页无法显示”，那将是多少沮丧的事情。
11. 适当的文字和图形并茂
不要刻意用图片填充您的网站，搜索引擎除了能拿到alt属性外，他们不认识图片。在适当的位置加上图片，有助于吸引访问者，消除看大篇文字的疲劳。
12.网页图片的要求
网页图片加上alt属性以及宽高属性，不要刻意压缩图片，确保图片显示不变形。
13. 在不同的浏览器测试您的网站。
为了让更多人能正常浏览您的网站，请用不同主流浏览器测试一下您的页面，确保您的网站都能正常运行。
14.通过W3C验证。
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
作者 tomato 的个人空间
1. 领会网站的主题，明确网站里展示的内容以及大部分浏览群体情况
想建一个网站，并且是一个对用户有用的网站，首先就应该考虑网站的内容以及网站功能，用户需要什么? 他们怎么快捷方便的找到想要的东西?作为一个网站设计师在整个设计的时候都应该围绕这个方面来进行。如果用户不能够迅速得到他们想要的东西，或是你的网站操作不便捷，那么这个网站就是失败的 。用户就会失望而去，可能永远都不会再登录你的网站。一个小例子：如果你想做了一个股票方面的网站，但网站的字体 大小都是12px的字，你想想，现在退休在家的老人，炒股的人数可不是一个小数目，就算你的网站内容再好再精辟，他们也不可能拿着放大镜对着显示器看你的网站吧，结果只是让你流失了大批的用户。
2.合理的颜色搭配
对于一个网页设计师，设计的过程是痛苦的也是快乐的，明确要做一个什么样的网站之后，要把主题更合理的体现出来都会经过一个选色和排版的过程。个人认为，如果不是做一个超弦的个性化网站，那么颜色搭配 并非是一件难事。第一，明确主色。其实颜色的行业特性并不很重，只是人们对一个行业的感知才造成了行业与颜色搭配的关联，比如做一个宾仪馆网站，当然不能能红色，为什么?其实归根于人的感知，因为 我们都认为红色是种喜庆的颜色，因而与宾仪馆不相符。像蓝色一般用在科技或技术型网站较好，粉红用在女性化方面的网站较好等。第二，辅色和点睛色，一个网站主体颜色确认，还须辅色和点睛色，辅色较多采用同种色彩搭配和邻近色彩搭配。同种色彩搭配就是按主色改变其透明度、饱和度、变淡或加深页得来，邻近色彩搭配就是按主色取色环上相邻的颜色，如红色与橙色。点睛色一般与主色相差较大，一般用在网页比较重要的内容或按钮，其作用为吸引用户视线、清楚网页给人视觉的疲劳，点睛色合理使用，避免太多的出 现，否则就会适得其反。
3.良好的网页布局
网页布局应该把握的要素是主次分明、协调整洁、尊重用户的视觉习惯，合理按排内容。把用户想要的东西 尽可能的首先展示在眼前，同时注意潜在的引导用户行为。俗话说：好记性不如烂笔头，在设计一个网站界面的时候，我们应该先用铅笔勾画出网站的排版草图，达到理想的效果后再用制图软件加以制作和修饰。细节决定成败，在设计效果图之中，尽量少用大的色块、突出导航、版块分明，以达到干净简洁整齐协调的效果。比如导航条适当加入鼠标效果;网页线条避免色差太大;轮廓阴影别太明显，若有若无最好;适当图文并茂;网页版块间距大小合理且统一;同级别文字样式统一;尊重日常生活物理特性达到逼真的效果(比如光照那边变亮，那边稍淡，再如一条彩带绕过一物体，转折处应该稍有突出且有细微圆角阴影)……
当网页效果图制作确认完后，我们就要着手html页面的制作了。
4.网页title及meta
网页的title及meta应该跟根基不出栏目及内容页而定，切勿全站使用一种的形式，keyWords可不用加，对搜索引擎作用不大，头部标签避免关键字堆切。
5.h1—h6标签的使用
一个网页h1标签只能用一次。在一个网站的首页、频道页、列表页，h1标签可以分别用于网站的名称、频道名称、栏目列表名称，但在一个网站的文章详情页，h1标签一定要用在文章标题上。h2—h6标签可以在一个页面重复使用，依次遵守网站层次结构。
6.CSS文件
尽量从外部用link导入css文件，写一个自己经常使用的重设css样式reset.css。避免使用*{}。一种样式写在一行，减小文件大小，能用class定义的尽量使用而减少用id定义，尽量避免针对不同浏览器而使用的css hack技巧，万不得己而为之。
7.背景图的优化
除网站实际内容之外框架使用的图片，尽量定义在css文件中，根据实际，尽可能把背景图合并，以提高加载速度。最好不要使一张很小很小的图片平铺一个较大的范围。
8.div+css布局，减小页面嵌套
用div+css布局目的就是为了减小页面代码，使网站结构层次化分明，内容与表现形式能分离。减小嵌套不只对搜索引擎友好，也有利于减小页面大小更方便后期维护修改。
9.优化页面js
能合并的js文件合并成一个，减少大规模循环和过多的层级引用，提高提高加载和运行速度。
10.避免死链接及空连接
对用户而言，如果点击一篇他们想要的文章打开的是“该页无法显示”，那将是多少沮丧的事情。
11. 适当的文字和图形并茂
不要刻意用图片填充您的网站，搜索引擎除了能拿到alt属性外，他们不认识图片。在适当的位置加上图片，有助于吸引访问者，消除看大篇文字的疲劳。
12.网页图片的要求
网页图片加上alt属性以及宽高属性，不要刻意压缩图片，确保图片显示不变形。
13. 在不同的浏览器测试您的网站。
为了让更多人能正常浏览您的网站，请用不同主流浏览器测试一下您的页面，确保您的网站都能正常运行。
14.通过W3C验证。
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
作者 tomato 的个人空间
中查找“制作一个优秀的网站 它应该注意哪几点”更多相关内容
中查找“制作一个优秀的网站 它应该注意哪几点”更多相关内容更多精彩
赞助商链接
