跳转到主要内容
微笑的天使 提交于 15 July 2009

在你构建网站的所有努力中,对于你的用户来说,最重要的就是站点的外观了。为了使你的drupal主题对于每个浏览器,每个模块,用户所选的主题都兼容的话,你需要花费很大的功夫。

首先你需要熟悉基本的CSS概念(Cascading Style Sheets)。关于Css的资源可参看CSS Discuss 或者HTML dog 。在CSS Zen Garden有一篇非常好的概述文章,介绍了Css的强大。

 

一定要通过XHTML 1.0 Strict验证。

 

现在有很多品牌的浏览器,而每个品牌的浏览器又有多个版本,而每种浏览器都有特定厂商维护的,所以你很难掌握一个浏览器在特殊的情况下会干些什么。这就带来了不兼容问题。如果你把注意力放到了这些不兼容性上,就会把问题复杂化,也使得你很难获得他人的帮助。只有当你使用通过验证的XHTML和CSS,并且它在符合标准的浏览器上能够正常工作的情况下,你才可以开始调试。人们经常听到设计者抱怨“但是但是但是,如果我让它通过合法性验证以后,那么外观就会再次变得丑陋起来,我不想再干第2遍这样枯燥无味的工作了”。在这种情况下,设计者得到的漂亮的外观,是建立在错误(bug)之上的!而在错误之上再进行调试,是理应被禁止的。

而事实上:一个经过验证、干净的布局在90%的情况下都能正常工作。在剩下的10%中,9%的问题很容易就得到了修复,而只有1%的情况需要更多的努力。真的!

 

如果你想验证你的整个站点,你可以使用这些工具

 

你的页面不可能在所有的地方看起来都一样

 

另一个需要重点注意的地方是,HTML和CSS的本质。它们意味着在不同的地方有着不同的外观。比如,我的移动手机不能为你显示基于javascript的6栏布局。而且它也不应该能够。Safari 和Konqueror决定不支持表单中的特定样式(出于安全性和桌面兼容性考虑)。大的屏幕将对你的字体重新调整大小,这将破坏你的固定布局。而旧式的显示器则使用的是更大一些的字体大小集。而网络较慢的用户常常看不到图片。或者甚至是CSS。

 

所以你要记住,你的样式对于浏览器来说仅仅是一个建议,建议它以特定方式显示。而它不是一个命令。

 

管理drupal主题不兼容性的工具

 

  1. 我们推荐你使用一个遵从标准的浏览器作为起点,比如Firefox。Firefox允许你对你网页的某些部分进行高亮显示,右击“查看所选区域的源文件”,可以帮你理解你主题使用的CSS类。理解CSS类是如何作用于底层的xhtml的,是理解你主题的关键所在。
  2. 使用标准的CSS命名规范。我们推荐为你的CSS类采用这些命名规范
  3. 为你的主题选择一个合法的DOCTYPE类型,并且包含一个DocType Declaration(DTD)
  4. 为了帮助分析你的HTML 和CSS,我们推荐你为Firefox安装Firebug插件。这个工具非常有用,它允许你查看你的HTML和CSS,并实时的对其进行修改,从而评估修改所带来的效果。另一个非常有用的Firefox插件是Web Developer toolbar。它包含了许多方便的功能。
  5. FireFox扩展插件查看格式化源文件,为你展示格式化的,代码着色过的源文件,并为每个元素提供可选的CSS信息。
  6. 首先你需要确保你的HTML或者xHTML通过合法性验证,然后才能开始修改你的CSS来修正你的bugs。Firefox 的Web Developer toolbar(web开发者工具栏)内置了一个web验证器。Opera也内置了合法性验证,只需要按下Ctrl+Alt+V就可以了。
  7. 一个更高级的工具是Watchfire WebXACT tool,可用于检查代码,分析HTML页面,定位错误。
  8. 如果你发现了一个模块输出了非法的XHTML,你需要为该模块提交一个问题(issue),里面附上截图,以说明问题所在。
  9. 你可以使用Lynx viewer来查看搜索引擎是如何看待你的站点的。
  10. 在IE下面,你站点网页中定位问题,可以参考下面的文章进行解决:Position Everything Internet Explorer Primer(IE中对所有东西的定位,初级读本)。
  11. Quirks mode(奇特模式)中,你可以找到许多问题的解答。
Taxonomy upgrade extras