公用样式模板的设计制作

div+css

文章来源：菏泽网站建设　　文章作者：UED163　　日期：2009年09月13日

这个话题是应腾讯ISD同仁之邀在WebReBuild三周年交流会上做的主题分享。由于临场等原因有些问题当时没有讲明白，回来后按原有思路形成了一篇小论文，对其中一些问题进行了进一步阐述。

这个话题是应腾讯ISD同仁之邀在WebReBuild三周年交流会上做的主题分享。由于临场等原因有些问题当时没有讲明白，回来后按原有思路形成了一篇小论文，对其中一些问题进行了进一步阐述。现场有位同行朋友提出了对使用表现性语义的质疑，当时没有给出让他满意的答复，因此文章中花了较多的篇幅来探讨语义性有关的问题，算是对那位朋友的解答。

一、公用样式模板的“公用”的含义

1. 能够应用在不同功能的web系统上（用在哪？）

企业的web开发团队除了开发一些在公共平台运营为公司用户服务的web产品，也会开发一些供公司内部团队使用的信息管理系统（IMS，Information Management System），用以优化流程，提高办公效率。例如企业ERP（Enterprise Resource Planning）、人事管理、工作流程管理、销售管理、仓库资源管理等系统。这类系统主要供内部部门使用，功能繁杂，注重信息的组织和功能的实现，对前台界面的个性化要求不高，不必要每个系统都重新设计制作界面，提供一套公用样式模板可以有效地提高开发效率。

2. 提供给不同专业背景的人使用（给谁用？）

有一类web页面时效性很强，需要非常快速地制作上线，例如一些新闻专题；另外有些页面总量很大，但结构相似，例如上面提到的IMS系统的很多不同的功能模块。这类页面由于时间限制或者根本没有必要由专业的重构人员来精细制作，写好每一个页面每一个标签的代码，所以也有必要提供一套使用方便的公用样式模板，供内容编辑、或者后台开发人员直接使用。

二、公用样式模板的设计要求

能够应用在多个web系统上要求

1. 公用模板设计需要具备抽象性、代表性

（1）。整体规划页面层次逻辑

h1，h2，h3，h4，h5，h6 的整体规划

一本书的目录部分，往往能很清晰地体现出这本书的结构层次，第一章第一节第一小节，次序井然。好的网页也应该有清晰的层次逻辑，网页大标题、次级标题、段落内容等，层层展开。（X）HTML网页标记语言本身也给我们提供了标识网页层次的标签：h1/h2/h3/h4/h5/h6。在公用模板中要整体规划好网页内容的结构层次，并恰当地使用这些标签来体现。在禁用CSS的情况下，可以从浏览器默认样式方便地看到网页的结构层次。

清晰的导航菜单和面包屑（crumb）标识

在做好上面合理地规划h（n）标识的情况下，导航菜单和面包屑导航在网页上能更加直观地体现网页的层次，也是增强网页可用性必须具备的网页元素。

（2）。具有代表性的页面布局结构