有许多 web 设计师都有为纸质印刷品设计版面的经验。事实上,设计网站时,把网页当做纸质印刷品来对待是最容易想到的思想,除了把白纸换成了屏幕,其他做法没什么两 样。这种做法注定会失败。 Web 是一种不同的媒体。在设计纸质印刷品是时,必须把原始内容和版面设计交织在一起才能看到最终的印刷效果,但在设计网页时,只有将其分离开来才能获得最佳的 结果。
最准确的网页设计思路是把网页分成三个层次,即:结构层、表示层、行为层。
网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。”
网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
网页的表示层和行为层总是存在的,即使我们未明确地给出任何具体的指令也是如此。此时, Web 浏览器将把它的默认样式和默认事件处理函数施加在网页的结构层上。例如,浏览器会在呈现“文本段”元素时留出页边距,有些浏览器会在用户把鼠标指针悬停在 某个元素的上方时弹出一个显示着该元素的 title 属性值的提示框,等等。