如何才能让网站更优秀,更适合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

html中网站片头制作利器,制作一个优秀的网站 它应该注意哪几点相关推荐

  1. 如何借鉴一个优秀的网站

    心得 如果想成为一个优秀的前端开发者,我觉得浏览大量优秀的网站是必不可少的.除了提高自己的审美以外,还可以欣赏到许多特别优秀的交互效果,这样不仅可以迅速提高自己的技能,还可以丰富自己的想象力.当然这一 ...

  2. HTML5 网站大观:应用图片大背景的优秀 HTML5 网站作品

    在网站中使用一张大图片作为网页的背景不仅能突显出网页的主题,还让页面看起来更加的生动有趣.但是,要应用好图片大背景是非常有挑战的,需要挑选出和网页主题能够很好的融合的照片,经过修饰之后再嵌入网页中.今 ...

  3. mysql网站如何搭建_如何搭建一个自己的网站(绝对详细~)

    前言 这篇文章教大家如何搭建一个自己的网站,平时我们在写项目的时候大部分都是由运维去部署发布的,可能对这方面不太关注.今天手把手教大家实现,我媳妇看了都学会了! 准备工具 一个可运行的java项目: ...

  4. icns图标制作_PPT制作必备:这6个网站,帮你打造超强的图标素材库

    在制作PPT,设计网站或者进行其他一些文档的排版时,适当得使用一些小图标不仅能起到锦上添花的作用,使页面看起来更有设计感,而且也能让排版脱离单调的文字堆叠,看起来更加形象具体. 比较下面几页PPT,效 ...

  5. 网页制作技术革新:《HTML5 网站大观》系列文章导航

    <HTML5 网站大观>系列文章自去年7月至今已总共发布了12篇,向大家分享了基于 HTML5 制作的企业网站.个人网站.博客网站.单页网站.作品集网站等等各种类型的优秀 HTML5 网站 ...

  6. 网站分析实战——如何以数据驱动决策,提升网站价值(大数据时代的分析利器)

    网站分析实战--如何以数据驱动决策,提升网站价值(大数据时代的分析利器) 王彦平吴盛峰  编著 ISBN 978-7-121-19312-5 2013年1月出版 定价:59.00 316页 16开 编 ...

  7. 网站分析实战——如何以数据驱动决策,提升网站价值(大数据时代的分析利器)...

    网站分析实战--如何以数据驱动决策,提升网站价值(大数据时代的分析利器) 王彦平吴盛峰  编著 ISBN 978-7-121-19312-5 2013年1月出版 定价:59.00 316页 16开 编 ...

  8. 网络推广——在网络推广的道路上如何成为一家优秀的网站建设公司

    对于需要网站建设的企业来说,如果想要找一家足够优秀的网站建设公司进行委托,不仅可以为企业省时省力,还能让企业网站在日后的优化运营过程中,进一步助力网站达到事半功倍的优化效果.那么对于一家网站建设公司来 ...

  9. 如何设计优秀的网站首页?

    优秀的网站首页设计 网站首页是用户进入你网站看到的第一面,也是给用户的第一印象,如果印象不好,不够吸引,那样会让用户没有了继续浏览的欲望.一个不够吸引人的网站首页,就算你网站推广做的再好,IP量再高, ...

最新文章

  1. 可扩展标记语言--XML
  2. 0基础学python-看完这篇,零基础也知道怎么学Python
  3. jchdl - GSL Port
  4. Tomcat优化之配置线程池
  5. typescript get方法_使用 Typescript 构建类型安全的 Websocket 应用
  6. Tcp连接的七次握手浅析
  7. iptables命令_程序员最有用的linux命令汇总
  8. [转]综述论文翻译:A Review on Deep Learning Techniques Applied to Semantic Segmentation
  9. NMS(Non-maximum suppression)非极大抑制
  10. Centos6 import tensorflow遇到的问题
  11. 利用JS实现简单的注册界面验证小案例
  12. Tera Term 下载教程
  13. linux io page fault,Linux的page fault
  14. Android系列之Fragment(一)----Fragment加载到Activity当中
  15. 无论如何,我喜欢过你
  16. H.265/HEVC学习笔记:变换
  17. 火焰焰心matlab,火焰心_刘德华_高音质在线试听_火焰心歌词|歌曲下载_酷狗音乐...
  18. android studio gradle官网下载地址,Android Studio离线配置gradle(附gradle下载地址)
  19. 台式计算机如何升级,台式电脑怎样升级系统
  20. 瞬变电磁检测原理和特点

热门文章

  1. java yuv420sp转nv21_Android图片格式NV12(YUV420SP)转YUV420P
  2. 干货 | Elasticsearch 冷热集群架构实战
  3. Safari中的印象笔记剪切插件默认要我登陆evernote账号但我只有印象笔记的账号啊!没关系一步教你解决!
  4. 记录--对于$off,Exclude 和 Extract的一点理解
  5. linux看目录容量,linux查看目录的大小(占用量)
  6. 多媒体视频的添加,声音,开始/暂停,放大...可以引进一些网页上收费的视频,自己这样处理就可以观看
  7. 蛇行矩阵 代码可以直接运行
  8. 合成模式 :Composite(转自阿良.NET)
  9. 我比任何人都希望为你穿上嫁衣
  10. linux方法有哪些,Linux 进程有哪些方法?这4种方法轻松易学