转至繁体中文版　　　  | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告：     敏韬网|教学资源学习资料永久免费分享站！  [mintao  2008年9月2日]        
您现在的位置： 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
实现HTML自动排版的法则    热     ★★★★

实现HTML自动排版的法则

作者：闵涛 文章来源：闵涛的学习笔记 点击数：636 更新时间：2009/4/23 11:13:53
　　简介：

　　我们将网页或HTML应用程序国际化时，需要将它们翻译成多种语言版本。如何做到文本在转化后，自动调整页面中各个单元位置，间距和尺寸呢？这听起来似乎很难，但是如果按照本文讲述的几条法则去建立HTML页面，你就会相信这是事实，这几条法则能够省去本地化工作人员的很多麻烦。
　　　注：本文中的对话框是指包含基本交互控件的WEB页面，由于其风格与WIN32的对话框非常相似所以也称之为对话框。

　　引言：

　　不久前大多数在Windows平台上的用户界面使用的还是WIN32的或其他可视化编程工具做出的弹出式窗口，但是目前很多开发人员利用HTML强大的功能来创建应用程序的用户界面。这是一种新的思路和方法，它易学易懂，编写方便，利于开发。但由于页面中的文本在转化为其它语言版本时会出现许多调整大小和位置的问题，这就给本地化工作带来很大的困难。对于整体采用层叠式表单（CSS）的普通Web页面，这种转化也绝对是一场噩梦。但如果所有的HTML用户界面元素都使用正确的编码标准构建，那么留给本地化工作人员可做的事情就微乎其微了。HAL（即HTML自动排版）的编码标准给我们提供了HTML国际化应用时避免调整的一种方法。本文就此列举了一系列法则和法则的主要依据。法则后附有编码样例。

　　　备注：HAL兼容大部分HTML对话框，特别是对于可以调整大小的对话框或窗口。

　　HAL几大优点：

　　1、本地化工作人员只需翻译文本部分。用户界面会自动调整所有控件来匹配它的大小。
　　2、准备工作在最初的版本中做一次（通常为英语）即可，不需要为多种语言版本重复做多次。
　　3、完全省略了本地化过程中设定对话框尺寸的步骤，也省略了其它易出错的步骤，如试图从产品的前一版本或其它语言中重复使用对话框尺寸。
　　4、不会产生显示方面的错误，从而使本地化的对话框质量与原英文版本无异。
　　5、本地化工作人员不必修改由于对话框尺寸重新调整而引起的错误。如果在转换用户界面时出现任何问题，应交给开发人员修改这些错误，修改完的结果就会应用到所有其它语言上。这就避免了在其它语言上重新出现这些错误，即使在最坏的情况下，本地化工作人员也仅仅需要重新翻译一遍。
　　6、因为字符串改变时本地化工作人员要调整对话框，所以做的调整工作可能比直接设置大小花的的时间还要多。 如果处理不当，也易添加新的错误。HAL完全解决了这个问题。
　　7、由于无需调整其它控件就可以给对话框快速加入新的控件，因此对于开发人员来说，对话框变得更易于管理。HAL法则特别适用于创建可重新调整大小的对话框。如果对话框规格需要改变，只需在一个地方改动（一个全局样式表单），而不需在每个对话框上都做改动。对话框尺寸的全局控制保证了产品用户界面的整齐和一致性。

　　HAL的不足之处：

　　当然，没有什么是十全十美的，采用HAL法则也会带来一些其它问题。

　　1、页面/对话框的构建变得有些复杂，因此原始对话框很有可能比以前有更多的初始化错误。
　　2、在页面的加载处理过程中需要一些额外的代码（调整按钮的大小），这会使加载速度降低，但用户对此并不会太敏感。
　　3、控件的对齐不一定会很一致，并且当对话框大小改变时它们的大小也会随之改变。

　　HAL法则：

　　法则一：不使用绝对位置

　　不要在CSS属性中设置为绝对位置。最不当之处的是设置成绝对位置的同时也把左上角设置为固定值。
　　对页面中元素使用绝对位置将使其不能够自动定位和确定尺寸。绝对位置只适用于层叠式表单（CSS）。position，left和top是层叠式表单中控制位置的关键属性。

　　以下代码是绝对不允许的：


＜DIV id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;"＞
Fi＜U＞n＜/U＞d what:
＜/DIV＞
　　绝对位置的使用特例：

　　所有HAL法则都有特例。如果用表达式表示的绝对位置就可以使用，可以参考法则二。

　法则二：对话框应当匹配最大可用宽度和高度

　　使用最大可用宽度和高度设计对话框。这有两种方法：

　　1、用width=100%的表格来构建对话框。

　　代码样例如下：


＜body＞
＜table width=100%＞
＜… can contain other tables …＞
＜/table＞
＜/body＞
　2、使用基于表达式的位置和基于对话框大小的尺寸（即body.clientHeight）。

　　代码样例如下：


＜div style='position:absolute; height: 　
　expression(document.body.clientHeight / 2); width: 　
　expression(document.body.clientWidth / 2); '＞
＜/div＞
　　当表里嵌有多个表格时，最好的解决方法是正确设置元素的大小再放入表中，并且维持它们的相对位置。
在操作过程中需要考虑：
  • 哪些控件有相同的尺寸。它们必须位于相同的表格单元中，可以不在一行。
  • 哪些控件有相同的对齐方式。
  • 哪些控件会将其它控件挤到右边。
  • 哪些控件有固定的尺寸。
　　多数情况下本地化人员只允许给对话框设置初始化的宽度和高度。只有非常必要时才使用固定的对话框宽度（例如对话框必须匹配其它对话框的制表符）


　　法则三：每个控件都应位于分离的表格单元中

　　尽量使每个控件位于分离的表格单元中。这样做文本可以单独换行，并且在中东语言环境下也可以进行翻转和定位调整的工作。
有些情况下可以忽略这条法则：

  • 多行按钮有相同尺寸。
  • 上下紧邻的标签。
　　法则四：允许文本换行

　　在包含文本的表格单元中不要用"nowrap"属性（如＜td nowrap＞），否则文本变长时就不能换行。当想让文本占用一行并保证为翻译成其它语言留有足够的空间时，才能使用这一属性。
　　有时为了保持对话框整体比例平衡，需要用到"nowrap"属性。

　　错误的换行方法：


＜td nowrap＞
Fi＜U＞n＜/U＞d what:
＜/td＞

　　最好的办法是给表格设置一个初始化尺寸，如下：


＜td width=20%＞
Fi＜U＞n＜/U＞d what:
＜/td＞

　　另一种方法是在词间使用不中断的空格符（ ）。


＜td＞
Fi＜U＞n＜/U＞d what:
＜/td＞


没有相关教程
教程录入：mintao    责任编辑：mintao 
  • 上一篇教程：

  • 下一篇教程：
    • 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    　 注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]
    　　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
    		•
    赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题，因而无法显示。
    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长：MinTao ICP备案号：鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网。A打造B、C、D……
    		咸宁网络警察报警平台