实现HTML自动排版的法则2

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

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

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

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

时间: 2024-12-27 20:17:49

实现HTML自动排版的法则2的相关文章

实现HTML自动排版的法则

简介: 我们将网页或HTML应用程序国际化时,需要将它们翻译成多种语言版本.如何做到文本在转化后,自动调整页面中各个单元位置,间距和尺寸呢?这听起来似乎很难,但是如果按照本文讲述的几条法则去建立HTML页面,你就会相信这是事实,这几条法则能够省去本地化工作人员的很多麻烦. 注:本文中的对话框是指包含基本交互控件的WEB页面,由于其风格与WIN32的对话框非常相似所以也称之为对话框. 引言: 不久前大多数在Windows平台上的用户界面使用的还是WIN32的或其他可视化编程工具做出的弹出式窗口,但

jquery-jQuery自动排版,急在线等

问题描述 jQuery自动排版,急在线等 一横排8张图片,我隐藏右边jQuery如何让其余图片自动向右靠 解决方案 右浮动布局就好了, <style> .floatright img{float:right;margin-left:5px} </style> <div class="floatright"> <img alt="image1"/> <img alt="image2"/>

Visual Studio 2008 有没有自动排版的插件

问题描述 VAssistX不可以自动排版.我想要的效果是,比如方法和方法之间可以自动加入两个换行. 解决方案 解决方案二:自带可以自动缩进吧.这种需求的,找找其他插件吧解决方案三:Ctrl+A全选,或者选中部分内容,然后,Ctrl+K,Ctrl+F组合,格式化代码.整体缩进,使用右上角的"增加/减少缩进"."注释/取消注释代码"

UITabBar对子控件的自动排版问题

问题描述 UITabBar对子控件的自动排版问题 自定义tabbar时 出现了问题 自定义的view中创建了button和view 并没有给view设置frame 可是运行时 这个做视觉效果的imageview会显示出来 并且大小与button一样 解决方案 http://bbs.csdn.net/topics/391065486?page=1

帝国cms编辑器自动排版插件

主要功能: 1.自动排版,将编辑器内的内容自动排版,段落自动居左,图片自动居中,清除多余空行,可定制段前是否空格. 2.图片排版,将编辑器中的图片自动居中,免去每张单独设置的烦恼. 3.简繁转换,可在编辑器中直接进行简繁转换,一键操作,方便快捷. 4.自动排版后,代码里只保留段落标签<p></p>,粗体标签<strong></strong>,(<b></b>会被自动替换成<strong></strong>),垃

基于VBA组卷中自动排版的实现

一.引言 建立完善的题库是课程建设的一项重要工作,当数据库的形式进行题库管理,通过编写抽题程序,在分类明确.题量丰富的题库支持下,实现自动组卷并非难事.试卷一般都采用Word文档,若采用VBA编程,要用程序将试题写入到Word文档,可以通过引用 Microsoft Word 9.0 Object Library中的相关对象来实现:图片.图形.文本框及艺术字等可利用Shapes集合对象的相应方法加入到文档中:表格也可以通过Tables集合对象的Add 方法加入,其大小.位置等排版信息都可以以参数的

[OBJECT-C语言随笔之二] 《NSLOG》常用的打印调试语句与自动排版

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-object/395.html 虽然C语言很早就有接触,也利用C++写过PC单机游戏,但是.咳咳,N久没接触了,没办法,写点随笔把-哈哈: 此节简单写下Object-C中对于调试打印的常用语句: 简单类型的定义如下: 1 2 3 4 5 6 7 //常用类型的定义   int i =10;   BOOL isShow=YES; 

基于jQuery试卷自动排版系统_jquery

需求 根据提供的试卷题目(是一个干净的只有"数据"的HTML网页)生成一份多页的试卷,用户能执行翻页.具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行).同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体.颜色.行距.页面边距,像字处理软件一样--),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等).题目提干.选择题的选项.说明文字可以包含多媒体信息(文字.图片.列表.表格.视频等等--).选择

基于jQuery的试卷自动排版系统实现代码_jquery

根据提供的试卷题目(是一个干净的只有"数据"的HTML网页)生成一份多页的试卷,用户能执行翻页.具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行).同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体.颜色.行距.页面边距,像字处理软件一样--),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等).题目提干.选择题的选项.说明文字可以包含多媒体信息(文字.图片.列表.表格.视频等等--).选择题选项