当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 让网页更有阅读性的几个网页设计技巧

HTML/XHTML教程
通过W3C XHTML1.0及CSS标准必须注意的九个问题
注意这11个问题保证CSS的渲染效率
用css+js定义input_file元素的样式来兼容FireFox
CSS技巧:如何使未知高宽的图片实现垂直居中
CSS基础教程:布局网页技巧的完全学习手册
css知识:Div和Span在使用中的不同之处
css技巧:批量保存div+css网页中的图片的几种方法
CSS技巧:常用的属性代码简化表
介绍二款b/s开发中常用小工具
css教程:IE6、IE7和FF的hack的运用技巧
Google改进SSL机制,控制SSL安全机制存漏洞
css技巧:分享9个网页制作常用技巧
规范Web站点设计css类以及id的命名方式
html教程:WEB标准从头开始_DOCTYPE声明
html/css教程:背景图片的定位问题详解
CSS教程:自动隐藏网页文字的技巧
汇总一些IE与Firefox的CSS兼容问题及解决办法
网页中利用Title属性的好处
40多个漂亮的网页表单设计实例
制作商业HTML邮件的建议

HTML/XHTML教程 中的 让网页更有阅读性的几个网页设计技巧


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 43 ::
收藏到网摘: n/a

    合理的设计好一个网页,可以使读者快速阅读网站的文章,并且会饶有兴趣的阅读其他的内容,如果设计的网页很另类很个性,导致读者无法迅速找到想要进入的主题,那么读者会很快离开你的网站。那么如何设计好一个网页呢?一些小细节和一些操作习惯就会让你的网站内容更有阅读性。

      1:把文章内容字体改大一点,字太小看起来很累,尤其是在内容很多的时候。目前文章内容流行的字体是14PX(像素),和180%或150%的行距,这样不容易造成视觉疲劳。
例如在CSS文件中可以加入如下代码:
body{font-family: "宋体","微软雅黑","arial",Verdana, sans-serif; font-size: 14px;line-height: 180%;}
这段代码的意思是 BODY区域也就是整个页面默认是宋体,如果没有宋体则改为微软雅黑,以此类推。font-size的意思是字体大小,line-height是意思是行距。
(非常抱歉,我犯了一个严重的错误,目前流行字体应该是14px,结果我打成16px,这里向各位修改成16px的朋友说一声抱歉。)

      2:给文章内容的链接添加下划线,这样读者可以清楚的知道哪里可以点击。例如:显示下划线代码text-decoration: underline;

      3:文章内容尽量简洁明了.更不要把文章弄成花花绿绿的字体颜色。

      4:要勤分段落。太多的段落总比太少的段落要好很多,这样文章看上去错落有致,而且读者也容易阅读.

      5:内容摘要很重要,这样读者在阅读完标题,再阅读摘要时就能大致了解文章要表达的内容。

      6:给重点的句子或者段落加粗体现实。这样不仅方便快速阅读,而且搜索引擎也会着重阅读。

      7:如果文章内容很长,可以使用分页。分页导航一定要清晰明了易于点击。

      8:把文章保持在一个合理的宽度,尽量不要直接从word文档粘贴到文章编辑器当中。以免把样式代码也粘贴到编辑器中。我一般都使用记事本来写文章。

      9:可以考虑使用插图.如果文字太多的情况下,配图可以提高文章的可读性。

      10:最后一点也是最重要的一点,网站一定要有清晰的导航,方便读者浏览。我曾经去过几个非常有个性的博客,但有接近30秒的时间都是在找从哪里能点进文章内容。这样的设计虽然很另类,但很不合理。