Web开发中html布局指南
Web 窗体全球化的 HTML 布局指南
HTML 布局的最佳实施是确保本地化人员只需翻译字符串，因为用户界面自动将所有控制调整为合适的大小。本地化进程将无需执行调整大小的步骤，因而也就排除了通常 由该步骤导致的错误。下面是为全球化设计 Web 窗体的一些建议。
- 永远不要将层叠样式表 (CSS) 属性用于绝对位置。指定绝对位置将使元素不能被自动 定位和确定大小。
<!-- Do not do this -->
<DIV id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;"> - 窗体应采用可用宽度和高度。有两种方法可做到这一点。第 一种方法是确定主要元素大小，例如将表设置为 width=100%。第二种方法是根据窗体的整个大小使用 CSS 表达式设置各元素大小。
<!-- Table sized to take up entire width of the form-->
<table width=100%>
<!-- div sized to take up half the width and height of the form -->
<div style='position:absolute; left: 0; top: 0;
height: expression(document.body.clientHeight / 2);
width: expression(document.body.clientWidth / 2); '> - 每一控件都应位于单独的表单元格中。这使得文本可以独立 换行，并确保对于其文本布局是从右向左显示的区域性的对齐方式正确。
- 允许文本换行。避免对于包含文本的表单元格应用“不 换行”属性。只在您希望文本保留在一行中并且有足够的空间来对该文本进行扩展以适合任何语言的情况下，才使用此属性。
- 将复选框和 单选按钮与其标签文本分隔开。将复选框和单选按钮的标签放置在控件的单独的单元格中。这使得文本在变得更长时可以正确换行。但是，您还应对窗体进 行设计，以便在对文本进行翻译后在适当的情况下文本还可以保留在一行中。
- 为增长保留空间，并避免采用固定的宽度。文本在 被翻译为其他语言后可能会扩展。一个很好的经验就是为短字符串（少于 10 个字符）保留 300% 的增长空间，为中等长度的字符串（10-20 个字符）保留 200% 的增长空间，为大型字符串（超过 20 个字符）保留 100% 的增长空间。
一个可接受的解决方案就是将表单元格宽度设置为窗体宽度的百分比，这样单元格就可以基于整个表进行扩展。但是，应尽可能少得指定相对大小（100% 除外），因为您希望 HTML 布局引擎为您执行大多数此类工作。
<!-- Table cell sized to take up one quarter width of the table -->
<td width=25%> - 在尽可能少的地方设定按钮大小。经常有一组按钮应具有相 同的大小。如果可能，应在一个地方为全组按钮设置此大小。为在列表框和分组框中扩展文本而保留空间。
- 尽可能少地设置高度。不 要为包含文本的任何表单元格或控件设置单元格高度。（您可以为 CSS 元素设置行高度。）否则，如果用户在浏览器中设置了文本大小，页面的外观将发生更改。
- 不要在 HTML 标记中使用左或右对齐。通 常，避免为任何表单元格设置“align=left”或“align=right”。这些属性可能会影响文本布局从右向左显示的区域性的窗体布局。
- 避 免采用可能需要更改的内联 CSS 值。将本地化人员可能需要更改的所有 CSS 值保留在样式表中，而非内联。这包括设置页面字体。
