实现HTML自动排版的法则2_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

实现HTML自动排版的法则2

作者：闵涛文章来源：闵涛的学习笔记点击数：676 更新时间：2009/4/23 11:13:54

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

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

　　代码样例（设计正确的复选框代码）如下：

＜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值保存在层叠式表单文件中。这样

没有相关教程

教程录入：mintao 责任编辑：mintao

上一篇教程：实现HTML自动排版的法则

下一篇教程：动态HTML的问答

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……