步惊云和断浪:用表格进行网页排版的问题

来源:百度文库 编辑:高校问答 时间:2024/04/28 02:04:00
我最近做网站的时候在网页排版上遇到了大问题,我是通过表格对网页进行排版的,但在网页中间部分要嵌入多个表格,在表格中再放需要的图像和文字,但遇到了以下几个问题,
1。当图像或文字比规定的表格大时,表格被撑大了,这显然不是我期望的,怎样才能控制住呢?
2。在定义表格和行的宽度时,是应该用具体的数值还是用百分比,哪一种更好控制表格,使表格不会随意的撑大,而且更利于开发人员开发呢?
3。是不是最好对每一格表格都规定它大小和对齐方式?,或者最起码应当遵循什么样的准则呢?
真的是很头疼的事情,还请大家多多帮忙解答,谢谢了先
嗯,感觉大家的答案都很好,难道只能采用一个为答案吗?

1.使用<img src="图像的链接" width=*** height=***>其中***是你需要的尺寸,强制图像按照此尺寸显示。

2.根据具体情况,相对说来,最外面的表格宽度采用惯常的标准:755,以保证能适应800×600显示模式的浏览。

3.习惯上不需要,因为那会增加代码量,不利于网络快速传输和浏览。

1.这是难免的,所以你要在把图像放在表格之前,把图像进行处理,同时表格的插入也是有学问的,你必须规划好.
2.这个根据个人的习惯来规定,我认为百分比比较好一些,使画面效果更好一些.
3.你可以把内容输入以后再进行排版,否则就很麻烦了.

关于用表格排版的问题, 我觉得国内的网站似乎用像素值的比较多, 所以经常会说 "最好以XXX*XXX分辨率浏览该网页", 但我看国外的英文网站常常是不定宽的, 表格的宽度是相对的.
放图像的问题, 有几个方法. 首先, 你自己要决定, 是让网页适应图像还是让图像适应网页? 决定了这一点, 其余的就好办了. 如果是让网页适应图像, 重新设定表格的宽度. 如果是让图像适应网页的话, 正如楼上几位所说, 在<img>标签中使用width和hight属性, 或者用图像处理软件把图像变小; 在网页中缩小图像比较简单, 但如果用图像软件把它真的缩小, 也有一个好处, 就是图像变小后, 网络的传输速度可以加快一些.

回答:

1。图象可以限定高和宽,文字可以采用以下方法
If Len(Trim(文字))>15 Then
输出文字=Left(Trim(文字)),13) & " ……"
来进行处理。这种方法通常都被使用在新闻题目的输出。

2。一般用%来做表格的都是内表格,外表格一般都确定为一个数值,这样不管分辨率是1024*768还是800*600都可以正常查看网页。所以个人建议,外表格定义数值,内表格可以适当采用%和数值。

3。准则呢,这个要看你整体页面的设计思想了,如果所有的新闻题目输出都是靠左,那么其他的也应该尽量靠左,这样可以给别人一个统一的感觉,否则页面会看起来很乱。

?1 表格高宽明确化;
?2 总框架明确数字,内部明确百分比;
?3 表格属性不使用默认值,以适应异类环境;

表格是在网页设计中用的最多的元素,大多数的网页都是使用表格来组织的。利用表格来组织网页内容,可以设计出布局合理、结构协调、美观匀称的网页。我们今天要讲的不是表格在控制页面元素的应用,而是表格边框的一些技法。合理的设置表格边框,有时可以得到你意想不到的效果!本文讲述的内容是细线边框表格的制作,涉及的知识比较基础,仅供新手参考。

一.表格基础:
<table>:表格的标识符,用来界定表格的范围。<table>标签的属性:
border:表格边框宽度所占的像素点数。
width和height:指定表格的大小。“width”规定表格的宽度,“height”指定表格的高度。 align:表格与其相邻文字的位置。参数值为left(居左)、center(居中)、和right(居右)。 cellspacing:指定表格各单元格之间的空隙。
cellpadding:指定单元格内容与单元格边界之间的空白距离的大小。
<TR>:行标签。 <TR>标签的属性:
align:表示该行中各单元格内容是左对齐(left)、水平居中(center)和右对齐<right>的。
valign:表示该行中各单元格内容是紧靠上沿儿(top)、垂直居中(middle)和紧靠下沿儿的(bottom)。 <TH>和<TD>:都是用来规定单元格内容的,<TH>规定表头元素的内容(表头元素一般位于每列的首行,用来说明该列的具体数据是关于哪个对象的)。<TD>规定该单元格的内容。<TH>和<TD>标签的所有属性及相应的属性功能是完全一样。
rowspan:表示该单元格所跨的行数。
colspan:表示该单元格所跨的列数。
align 、valign:用法同上。指定单元格内容的位置。

二.用表格制作跨幅细线:
有时候在网页排版时,我们需要一条细线,用图片似乎有点劳师动众了,其实,这个小问题用表格就能搞定。

制作过程:
1、插入一个一行一列的表格。
2、将表格的“cellpadding”“cellspacing”都设置为“0”。
3、将单元格的“bgcolor”设置为“#000000”(当然你也可以设置为其他的颜色,主要取决于你需要什么颜色的细线)“height”设置为“1”
。 4、查看源代码,将<td></td>中的“ ”去掉就ok了。
原理:这种细线效果其实就是一个高为“1pix”的表格。

三.细线表格
我们常常遇到添加表格边框以区别不同的内容的情况,但将表格边框宽度“border”设置为“1”时,边框又显得过于突出,那么,能不能制作细线边框呢?
制作原理:
1、插入一个一行一列的表格。
2、将表格的“border”、“cellpadding”设置为“0”,“cellspacing”设置为“1”。
3、将表格的“bgcolor”=“#000000”。
4、将单元格的“bgcolor”设置为“#FFFFFF”(当然你也可以设置为其他的颜色,主要取决于你需要什么颜色的边框)。
5、预览页面。

原理:前面已经讲过属性“cellspacing”表示的是单元格与单元格的距离。我们在设置整个表格的背景色时也包含了这个距离间的空白(我们设置的是“1pix”),而设置单元格的背景色时却不包含这个距离间的空白,这样以来,你在浏览器中看到的表格边框线其实就是单元格与单元格的距离所显示的。