公用样式模板的设计制作(2)

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

2)清晰的导航菜单和面包屑(crumb)标识

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

(2). 具有代表性的页面布局结构

网页结构布局也有一定的范式，往往包括页头、导航菜单、主体内容和页脚。遵循这些最普遍的布局原则才能最大程度保证公用模板的通用性。

(3). 具有代表性的页面元素

1)Logo、网页大标题

Logo具有品牌标识作用。大标题最直接地告诉用户网页/系统的内容/用途，但不是必备的，有些网页只有logo和副标题，因此设计时网页大标题可以作为可选项目。

2)导航菜单

导航菜单的重要作用不再强调。需要注意的是，在设计模板菜单样式的时候，要有标识当前项的样式，以及需要特别强调的进行高亮显示的项目样式。还要考虑多级菜单对子菜单进行下拉或者折叠显示的情况。设计的时候考虑周全，在需要的时候可以方便地进行拓展。

3)面包屑导航

不多强调，相当于网页上的GPS。

4)数据表格、文本内容

这类元素往往是网页的主体内容，用以呈现格式化的信息。在设计制作数据表格的表头、单元格样式的时候，需要考虑根据不同的数据形式，样式可能也会不同。比如较长的文本内容可能需要在单元格里左对齐，而数字类型数据，为了直观地比较数位大小，通常需要右对齐。有时候数据内容比较多，需要分页进行显示，所以也有必要提供一个具有良好用户体验的分页样式。

5)数据录入表单

用以录入数据的表单组件：单选框、复选框、下拉框、文本框等等。可以根据需要对这类网页原生的交互组件的默认外观进行统一的初始化。如果对交互效果要求比较高，需要设置鼠标、键盘事件与表单项进行交互时的不同样式(如 onmouseover、onclick、onfocus等)。由于IE6-对伪类选择器(hover、focus)支持不完善，制作这些效果的时候要使用脚本进行一些兼容处理。另外，还有一些填写表单时的注意事项等提示类信息，以及对录入数据进行验证出错时的错误提示信息，这些信息通常会显示在表单旁边，验证错误时还需要将出错的表单项进行高亮显示，这些样式在公用模板里都需要进行设计。

6)各类备注、报错、提示信息

包括上面提到的附加在元素旁边显示的表单填写提示及验证报错，和一些对内容进行解释的备注说明等，还有一些可能会以单独模块出现，例如用户操作成功、失败或者是登陆超时等提示信息。

7)交互UI组件：切换标签、下拉菜单和模态弹窗等