实现HTML自动排版的法则2
时间：2007-02-17 来源：PHP爱好者
法则五：把复选框、单选按钮与它们的标签分离
将单元中的复选框、单选按钮的标签与控件分离，这能够保证当文本变长时正确换行。但仍需要设计对话框，设法使翻译后的文本有可能置于一行中。
代码样例（设计正确的复选框代码）如下：
＜table cellspacing=0 cellpadding=0＞
＜tr＞
＜td valign=middle width=24px＞
＜input id=x type=checkbox accesskey=C＞
＜/td＞
＜td valign=middle＞
＜label for=x＞＜u＞C＜/u＞hoose me ＜/label＞
＜/td＞
＜/tr＞
＜/table＞
法则六：为今后的扩展预留足够的空间，避免固定宽度的项目
除非能够保证单元或控件中的文本翻译成其它语言时有足够的空间，否则不要使用固定宽度。如果需要指定尺寸，也应该是百分比形式的尺寸。基本原则是留出300%的扩展空间给较短的条目（少于10个字符），200%的扩展空间给中等长度的条目（10至20个字符），100%的扩展空间给长条目（多于20个字符）。
但是一定还要避免使用过多的百分比形式的尺寸。尽量利用HTML自动排版功能规划版面。这样无论控件里有什么样的文本，对话框也会很漂亮。切记除了表格宽度，其它百分比形式的尺寸要在样式表单中详细说明。
代码样例如下：
＜style＞
.myStyle {font-size: 10pt; font-family: Arial; width: 80%;}
＜/style＞
法则七：按钮，列表框和组群框大小的确定方法
1、如何确定按钮大小
方法一：在样式表单中指定按钮的固定宽度，所有需要相同尺寸的按钮都属于这一类别。其中需要注意的是尺寸单位应该是em，而不能是pixel。
代码样例如下：
＜style＞
.mainButton {width: 10em;}
＜/style＞
方法二：不指定按钮宽度，利用HTML的排版功能设置每个按钮的大小。这会造成所有按钮都同样大小，你可以再用HAL提供的简单代码调整同一类按钮的宽度。
代码样例如下：
＜script langauge=jscript src=HALsize.js＞＜/script＞
＜style＞
button {font: 9pt tahoma; padding-top: 0px; padding-bottom: 0px; padding-right: 6px; padding-left: 6px} .ButtonA{;}
.ButtonOKCancel {;}
＜/style＞
＜body onload='HALsizeButtons(document, "ButtonA", false);
HALsizeButtons(document, "ButtonOKCancel", true);'＞
＜button id=butOne class=ButtonA＞One Button＜/button＞＜br＞
＜button id=butTwo class=ButtonA＞Other Same Size Button＜/button＞
＜/body＞
2、如何确定列表框大小
首先，给短条目留出200%扩展空间，长条目留出100%扩展空间。然后把所有相关的列表框放在同样尺寸的表格单元中，以表格单元为基准，设置每个列表框为百分比形式（一般为100%）。
代码样例如下：
＜tr＞ ＜td width = 30%＞
＜select style = "width:100%"＞
＜option＞Bulgaria
＜option＞Greece
＜/select＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜!—同列不同行 --＞
＜select style = "width:100%"＞
＜option＞Bulgarian
＜option＞Greek
＜/select＞
＜/td＞
＜/tr＞
3、如何确定组群框的大小
对于组群框，最好是给文本留出扩展空间，并使其实际大小随表格变化而变化。包含组群框的表格单元要设为"nowrap"。组群框中的所有控件要同组群框放置在一个表中。
代码样例如下：
＜td width = 30% nowrap＞ ＜fieldset style = "width:100%; font-size: 8pt; line-}
... 设置其他所有元素 ...
＜/style＞
法则九：不使用左对齐和右对齐
对任何表格（或相应的CSS样式）都不要使用"align=left" 或 "align=right"。否则在中东语言环境下就不能正确调整。正确的方法是通过在单元格一侧附加单元使其左移或右移。还要确保左边界和右边界值相等。
法则十：避免将本地化工作人员需要改变的CSS值内联在网页中
将所有本地化工作人员可能需要改变的CSS值保存在层叠式表单文件中。这样本地化工作者只需改变一个样式表单文件，就可以将改动应用于所有共享该文件的网页中。
因为某种字体的名称在其他语言版本中常常不存在或者需要改动，所以避免在页面中使用＜font＞标识中的字体名属性
php爱好者站 http://www.phpfans.net 为phper提供一切资讯.
将单元中的复选框、单选按钮的标签与控件分离，这能够保证当文本变长时正确换行。但仍需要设计对话框，设法使翻译后的文本有可能置于一行中。
代码样例（设计正确的复选框代码）如下：
＜table cellspacing=0 cellpadding=0＞
＜tr＞
＜td valign=middle width=24px＞
＜input id=x type=checkbox accesskey=C＞
＜/td＞
＜td valign=middle＞
＜label for=x＞＜u＞C＜/u＞hoose me ＜/label＞
＜/td＞
＜/tr＞
＜/table＞
法则六：为今后的扩展预留足够的空间，避免固定宽度的项目
除非能够保证单元或控件中的文本翻译成其它语言时有足够的空间，否则不要使用固定宽度。如果需要指定尺寸，也应该是百分比形式的尺寸。基本原则是留出300%的扩展空间给较短的条目（少于10个字符），200%的扩展空间给中等长度的条目（10至20个字符），100%的扩展空间给长条目（多于20个字符）。
但是一定还要避免使用过多的百分比形式的尺寸。尽量利用HTML自动排版功能规划版面。这样无论控件里有什么样的文本，对话框也会很漂亮。切记除了表格宽度，其它百分比形式的尺寸要在样式表单中详细说明。
代码样例如下：
＜style＞
.myStyle {font-size: 10pt; font-family: Arial; width: 80%;}
＜/style＞
法则七：按钮，列表框和组群框大小的确定方法
1、如何确定按钮大小
方法一：在样式表单中指定按钮的固定宽度，所有需要相同尺寸的按钮都属于这一类别。其中需要注意的是尺寸单位应该是em，而不能是pixel。
代码样例如下：
＜style＞
.mainButton {width: 10em;}
＜/style＞
方法二：不指定按钮宽度，利用HTML的排版功能设置每个按钮的大小。这会造成所有按钮都同样大小，你可以再用HAL提供的简单代码调整同一类按钮的宽度。
代码样例如下：
＜script langauge=jscript src=HALsize.js＞＜/script＞
＜style＞
button {font: 9pt tahoma; padding-top: 0px; padding-bottom: 0px; padding-right: 6px; padding-left: 6px} .ButtonA{;}
.ButtonOKCancel {;}
＜/style＞
＜body onload='HALsizeButtons(document, "ButtonA", false);
HALsizeButtons(document, "ButtonOKCancel", true);'＞
＜button id=butOne class=ButtonA＞One Button＜/button＞＜br＞
＜button id=butTwo class=ButtonA＞Other Same Size Button＜/button＞
＜/body＞
2、如何确定列表框大小
首先，给短条目留出200%扩展空间，长条目留出100%扩展空间。然后把所有相关的列表框放在同样尺寸的表格单元中，以表格单元为基准，设置每个列表框为百分比形式（一般为100%）。
代码样例如下：
＜tr＞ ＜td width = 30%＞
＜select style = "width:100%"＞
＜option＞Bulgaria
＜option＞Greece
＜/select＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜!—同列不同行 --＞
＜select style = "width:100%"＞
＜option＞Bulgarian
＜option＞Greek
＜/select＞
＜/td＞
＜/tr＞
3、如何确定组群框的大小
对于组群框，最好是给文本留出扩展空间，并使其实际大小随表格变化而变化。包含组群框的表格单元要设为"nowrap"。组群框中的所有控件要同组群框放置在一个表中。
代码样例如下：
＜td width = 30% nowrap＞ ＜fieldset style = "width:100%; font-size: 8pt; line-}
... 设置其他所有元素 ...
＜/style＞
法则九：不使用左对齐和右对齐
对任何表格（或相应的CSS样式）都不要使用"align=left" 或 "align=right"。否则在中东语言环境下就不能正确调整。正确的方法是通过在单元格一侧附加单元使其左移或右移。还要确保左边界和右边界值相等。
法则十：避免将本地化工作人员需要改变的CSS值内联在网页中
将所有本地化工作人员可能需要改变的CSS值保存在层叠式表单文件中。这样本地化工作者只需改变一个样式表单文件，就可以将改动应用于所有共享该文件的网页中。
因为某种字体的名称在其他语言版本中常常不存在或者需要改动，所以避免在页面中使用＜font＞标识中的字体名属性
php爱好者站 http://www.phpfans.net 为phper提供一切资讯.
相关阅读 更多 +
