符合W3C的网站的开发模型和必要性的探讨(二)

二、推荐的WebUI开发流程和模式

 

随着浏览器兼容性的问题越来越严重和得到关注，Web开发市场场终于出现了一个重要的角色和技术：UI。这个UI技术不再是关注所谓让页面炫耀的事情，而且关注页面的标准化问题。

 

 

2.1 Web页面的结构化和语义化

 

UI工程师所做的第一件事情就是将平面美工设计的页面草图转为结构化的Web页面。html最大的误解就是元素的使用随意，而且由于历史原因，html的元素被设计的非常之多。其中还包含了很多用于改变呈现外观的元素，还有一些早期的为计算机专业人员使用的元素。现在，html仅仅用于表现文档数据，我们不应该再去使用仅和呈现有关的元素

 

以下和外观有关的元素不管你是不是认识或了解，我建议你可以忘记他们了。

l  b 指定文本应以粗体渲染。

l  baseFont 设置渲染文本时作为缺省字体的基础字体值。

l  big 指定内含文本要以比当前字体稍大的字体显示。

l  button 指定其中所含的 HTML 要被渲染为一个按钮。

l  center 将后面的文本和图像居中显示。

l  font 指定用于渲染所包含文本的新字体、大小和颜色。

l  hr 绘制水平线。

l  i 指定文本应以斜体渲染。

l  kbd 以固定字体渲染文本。

l  listing 以固定字体渲染文本。

l  plainText 以固定宽度字体渲染文本，

l  pre 以固定宽度字体渲染文本

l  strong 以粗体渲染文本。

l  sub 指定内含文本要以下标的形式显示。

l  sup 指定内含文本要以上标的形式显示。

l  tt 以固定宽度字体渲染文本。

l  u 带下划线渲染文本。

l  xmp 以固定宽度字体渲染作为示例的字体。

l  menu 创建一个项目的无序列表。

l  marquee 创建一个滚动的文本字幕。

l  dir 引起目录列表。

l  strike 以删除线字体渲染文本。

 

 

还有一些元素只有你在明确知道他们的作用或你知道自己在干什么的时候才去用

l  acronym 标明缩写词。

l  address 特定信息，如地址、签名、作者、此文档的原创者。

l  blockQuote 设置文本中的一段引语。

l  cite 用斜体显示标明引言。

l  code 指定代码范例。

l  del 表明文本已经从文档中删除。

l  samp 指定代码范例。

l  ins 指定被插入到文档中的文本。

l  var 定义编程变量。通常以斜体渲染。

l  iframe 创建内嵌浮动框架。

l  map 包含客户端图像映射的坐标数据。

 

一般来讲，我们建议你常用的html元素很少，有

l  a 标明超链接的起始或目的位置。

l  br 插入一个换行符。

l  li 引起列表中的一个项目。

l  ol 绘制文本的编号列表。

l  ul 绘制文本的项目符号列表。

l  input 创建各种表单输入控件。

l  img 在文档中嵌入图像或视频剪辑。

l  p 引起一段。

l  span 指定内嵌文本容器。

l  table系列 指定所含内容要组织成行列的表格。

l  h系列 以标题样式渲染文本。

 

你需要正确的理解Web页面元素的含义，使用正确的html元素和次序来描述他们，在这个阶段，你不要去关心Web页面的样子是否好看，你关心的是你设计的结构化的页面是不是符合Web拥有者想表达的意思。其中要注意的是img元素，img元素应该描述具有数据意义的图片，而不是提示性的图片。

 

 

2.2 Web页面布局

 

早前的Web页面布局大多是是使用table元素进行布局，但现在的规范是推荐使用div+css进行布局处理。而国内很多资深的老Web程序员对使用div+css替换table布局非常抵制和反感，他们寻找了大量的理由来证明table布局的合理性。其实所有的理由只有一点，使用table布局可以使用可视化的工具来辅助Web页面的布局，而目前看来，还没有特别方便的div+css可视化布局。

但为什么要放弃容易可视化的table布局方式，而选用div+css呢？

 

 

l  理由1：语义化。

table的语义是描述数据的，所以基于语义的要求，table仅仅应该在描述报表这样的数据时才使用，而布局不应该采用table。从语义的角度来看，table至少应该有表头标题，然后有同类型相似性的数据的罗列，然而使用table进行布局的话，table中的单元格中的数据就不再具有相似性的含义了。

div是html中少有的无语义的元素，改元素存在的价值就是为其他元素在逻辑上分组，所以，一个结构化的页面中仅可以观察到业务的数据逻辑和元素之间的逻辑关系。而不应该象table布局那样，在页面中可以查看到到页面时几行几列的布局模型。

 

l  理由2：结构化设计

使用div的模式，我们在将平面的设计转为结构化的Web页面时，仅需要考虑元素的语义和元素的嵌套正确性。但是如果采用了table布局的话，则在编写html页面之前必须先考虑布局的概念。而且你必须先编写行列的数量，然后在单元格中填写相应的html语义元素。但是使用div的模式，开发人员不需要预先考虑页面布局，仅需要自然的编写结构文档即可。

 

 

l  理由3：重构

 

使用table的布局的确可以采用工具进行可视化的设计，但是这个方便性非常的诡异，你只有在最初的时候能简单方便的采用工具来可视化，对于复杂的页面布局时，table的难度和div的难度都是差不多一致的。由于table布局时需要进行行列的合并，这样一来，在后期的页面布局改变中，div就变的非常的容易，只要你正确的div+float，就可相对轻松的改变页面的布局，而对于table布局来讲，在后期的加入或减少行列是非常痛苦的。

而且采用div+css后，页面的代码将非常的干净和纯粹，页面仅仅描述的是数据和数据之间的结构关系，而没有任何布局的信息。

 

 

l  理由4：搜索影响

 

网站建立的目的是发布，网站的拥有者希望网站有更多的人来访问，考虑到现在用户对搜索引擎的依赖度，则网站再相同关键字的搜索结果列表中，越靠前越好。优化网站以符合搜索引擎的偏好，有独立的技术称为SEO（Search Engine Optimization）。有很多人说div会加强SEO，table会减弱SEO。但div和table多SEO的影响似乎没有确切的依据。

会妨碍SEO的应该是对数据的野蛮分割情况，在页面的布局效果中，为了让字符之间出现一定的间距效果，而在字符之间插入图片等方式引起视觉上的效果。这种方式就是野蛮的分割了数据，对SEO产生不良的影响。

在table中往往会出现将数据的无语义定义。比如菜单，使用ol描述菜单项的集合关系，而table只能将菜单项放置在不同的td中，这样的模式，对高级的数据理解产生的负面作用。

总体来说，只要不对数据产生野蛮的分割，table和div都可以有效的进行SEO。

 

 

l  理由5：跨设备

 

BS模型之所以可以被流行，因为对同样的数据不需要特别的编译器进行解释，不同的供应商、设备、平台都可以对相同的数据进行解释和使用。因此BS在跨设备平台上有着天然的优越性。不过不同设备的分辨率不同，显示的模式也不同，而且在有些设备上，用户仅仅需要关注数据，而完全可以忽略呈现和布局。div+css的数据和呈现分离的优越性在这里被完全的体现出来，浏览器只要不解释css，则用户将可以得到纯粹的数据阅读。或者我们设备加载特定的css样式，就可以改变字体颜色等数值，为不同情况体现不同的呈现模型。

 

 

 

2.3 Web元素格式化

 

CSS所谓的呈现其实包含了两个概念：页面布局+元素的格式化。元素的格式化是指对具体有语义元素的字体，空白，边框，边界，颜色，背景等的修饰。html的所有元素都可以在inline和block直接被转换，block默认占据独行并且可以修饰高宽和四周的空白和边界，inline不能直接修饰高宽，其外观大小由内容决定，但可以和其他inline元素在同一行呈现。

Web元素的格式化需要了解CSS的各项修饰属性，基本上CSS提供大大多数我们需要的样式的控制能力，但是考虑浏览器的兼容性问题，不建议使用css中的所谓默认值，基本上我们应对每一个元素都有明确的值出现，比如我们修饰字体为粗体，最好是明确的说明字体宽度是700，而不要描述为粗体，否则不同的浏览器默认对粗体的宽度解释是不同的。