分享
 
 
 

实现HTML自动排版的法则2

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

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

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

<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>标识中的字体名属性

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有