Loving Coding & Visual Design

网页设计常用规则

什么是网页设计？根据我的经验来看，网页设计就是把设计好的网页图片转化成网页HTML格式的过程，这个过程分为两大部分，一个是网页的图形设计部分，另一个是HTML化的部分。对于很多网页设计的初学者，他们太过于依赖Dreamweaver、FrontPage这样的网页设计软件，从而忽略网页HTML化的重要性，忽略了手写HTML的重要性。一个干净、简洁的网页，对于提倡Web2.0和SEO的互联网来说，这无疑是给网站打下了一个先天的优良基础。

所以在把设计好的网页转成CMS可以用的模板之前，我们需要准备一个静态的干净的HTML网页。在Web2.0和SEO的共同原则下，我们应该遵循以下几点来coding网页：

  • 内部包含图片的DIV尽量包含说明文字，然后在CSS文件中利用CSS技巧定义DIV内部图片，例如定义图片为背景，并且偏移隐藏说明文字。

  • 尽量减少页面内的Javascript脚本和CSS样式，把它们外包到各自的文件中。网页引用的Javascript脚本和CSS样式表文件不宜太多太杂。

  • 网页结构的设计应该充分考虑到网页内容的变化和可扩展性，比如固定背景的DIV不太适合长度不固定的文字。

  • 重要的网页部分尽量放在HTML代码的前部。

  • 一个网页有且只有一个H1标签。

  • 网页编码Meta标签最好放在Title标签之前。

  • 网页内部链接、图片地址最好使用斜线开头的绝对路径。

  • 为了减少不同浏览下网页CSS的差异性，推荐使用RESET CSS。

  • 尽量使用em和百分比定义文字的相对大小，而不是px固定文字大小。

  • 检测网页兼容性的浏览器包括：IE, Firefox, Opera, Google Chrome, safari。



下一页

最 近 文 章

  1. 分享几个HTML5、canvas相关链接 - Tue, 20 Jul 2010 15:11:58 +0000
  2. Digital Point的Adsense帐户被停用 - Tue, 20 Jul 2010 05:30:39 +0000
  3. 给Discuz7增加修改用户名的功能 - Tue, 20 Jul 2010 16:34:50 +0000
  4. Google加大对关键字的相关性研究 - Sun, 18 Jul 2010 16:38:24 +0000
  5. 我看网站的优质链接 - Sat, 17 Jul 2010 15:50:24 +0000
  6. 如何屏蔽不喜欢的Adsense的Flash版广告 - Tue, 03 Aug 2010 08:54:34 +0000
  7. 英文Google无法搜索怎么办？ - Thu, 15 Jul 2010 10:19:22 +0000
  8. WebGL Resources - Wed, 14 Jul 2010 16:57:31 +0000
  9. 推荐几个我常用的网站工具 - Tue, 13 Jul 2010 16:47:10 +0000
  10. Google统计信息对网页优化的建议 - Mon, 12 Jul 2010 15:22:07 +0000