中华网校

系列网站: 中华网校 | www.网校.com | 3D模型 | 中华网校教育

电脑网校 | 业界新闻 | 职业网校 | 网校宝典 | 软件下载 | 网校论坛 | 网校联盟

电脑入门 | 网页设计 | 网络编程 | 图形图象 | 三维空间 | 多媒体 | 程序语言 | 操作系统 | 系统专题 | 办公应用 | 软件宝典 | 硬件天下 | 

 

您的位置:首页 >> 网页设计 >> HTML >> 新闻正文

实现HTML自动排版的法则(2)  

作者:  时间:2002-10-25  来自:  责任编辑:  阅读次数:

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>
 

法则五:把复选框、单选按钮与它们的标签分离

  将单元中的复选框、单选按钮的标签与控件分离,这能够保证当文本变长时正确换行。但仍需要设计对话框,设法使翻译后的文本有可能置于一行中。如果不这样做,换行后的文本看上去就会是这样:

  
  而不是这样:
  

 代码样例(设计正确的复选框代码)如下:






<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%; height: 100%">

<legend>Group Box Label</legend>
… 组群框中的所有控件应该在一个<table>中 …
</fieldset>
</td>
 

   注:不一定设置高度为100%,除非你只需要组群框与其它控件左右对齐。


法则八:高度的设置

  尽量不给含有文本的表格单元设置固定高度,否则当表格中文本换行或字体改变后,表格会变得非常难看。起分隔作用的空行除外。
你可以在字体大小范围内给包含单行控件的表格单元设置高度。
  应该给样式表单中的每个元素设置行高。否则,当用户在IE中改变字体大小时网页的外观就会改变。表格单元也要如此设置。






<style> body, td {font-family: tahoma; font-size: 8pt; line-height: 10pt;}

... 设置其他所有元素 ...
</style>
 

  法则九:不使用左对齐和右对齐

  对任何表格(或相应的CSS样式)都不要使用"align=left" 或 "align=right"。否则在中东语言环境下就不能正确调整。正确的方法是通过在单元格一侧附加单元使其左移或右移。还要确保左边界和右边界值相等。

  法则十:避免将本地化工作人员需要改变的CSS值内联在网页中

  将所有本地化工作人员可能需要改变的CSS值保存在层叠式表单文件中。这样本地化工作者只需改变一个样式表单文件,就可以将改动应用于所有共享该文件的网页中。

  因为某种字体的名称在其他语言版本中常常不存在或者需要改动,所以避免在页面中使用<font>标识中的字体名属性.


相关文章 最新文章 推荐文章

  中华网校依法保护知识产权,如果我们的文章有涉及或侵犯您的有关权益,请即时与我们 联系, 注明网址及文章,我们会即时处理或删除,感谢您的合作!中华网校email
  中华网校由广州市中六电脑城智锐计算机专业培训学院及中华网校技术中心提供网络支持未经本站许可任何个人网站、书刊报社一律不得私自复制,转载本站内容!

关于中华网校 | 广告服务 | 版权声明 | 投稿指南 | 网站合作 | 友情链接 | 网站地图

 

版权所有 中华网校 & 智锐网校 1999-2004 COPYRIGHT (C) 1999-2004 www.ZhiRui.com ALL RIGHTS RESERVED