0

我正在使用 DreamWeaver MX 创建我的网页。我使用嵌套表。一个只有一行一列的主表(W = 99% 和 H = n 像素)和一个具有重复图案的背景图像。第二个主表(W = 990 像素和 H = n 像素)插入并居中在第一个主表内。这是为了使页面适合所有屏幕 990xn 像素,并带有由背景图像完成的漂亮边框。

第二个主表有 ​​3 个区域:顶部的标题区域(与第二个主表水平和宽度相同)、左侧的菜单区域和右侧的文本区域,比其他两个区域大。我还有一个小水平表,在标题区域中插入了一行和三列。这是包含标题的图片和文本。还有一些其他的小表格:一个插入菜单底部的菜单区域,以包含三个“关注此社交网络”按钮,一个或几个小表格插入文本区域以包含图片,一个小表格表以包含 Disqus 评论。

一切运作良好。在 Chrome、Firefox、IE8 和 IE9 中,我网站的所有页面都像我想要的那样显示。然后我在一些页面中插入了 Disqus 评论系统。带有 Disqus 评论系统的页面在 Chrome 和 Firefox 中显示良好,但在 IE8 和 IE9 中,它是一团糟,评论占据了所有的宽度,使我网页的大部分内容消失了。

为了在 IE8 和 IE9 中正确显示 Disqus 注释,我在包含 Disqus 注释的网页的第一行中插入了过渡 Doctype 声明的代码:. 此操作使我能够在 Chrome、Firefox、IE8 和 IE9 中正确显示 Disqus 评论系统,但现在所有浏览器都有一个小问题:我的水平单元格线之间有空格(空白线)第二个主表和最近的文本行(这就像一个额外的水平填充;初始垂直和水平填充保持不变)。这些不受欢迎的空白中的每一个都有一个段落分隔符的大小。

这里有两个 URL 可以让您可视化问题:

  • 在我的网站主页http://pikpratik.com/中,不包含 Doctype 声明,不可见的表格单元格行和最近的文本行之间的空格是可以的。
  • 在页面http://pikpratik.com/fichye/pou_redui_risk_viktim_aksidan_sou_wout.htm中,在顶部,空白处明显出现,尤其是在标题(单元格行不可见)和第一行文本之间(Akèy > Jesyon risk ak dezas >) 以及最后一行文本 (Akèy | Kiyès nou ye | Di sa w panse de sit sa a | Plan sat la | Kontak) 和我的第二个主表的下边框之间。

重要提示:当我将过渡 DOCTYPE 声明代码和 Disqus 评论系统从页面中删除时,表格会在所有浏览器上正确显示。

我的问题是:我应该怎么做才能删除这些空白?

我不知道如何使用 CSS。请给我一个没有CSS的解决方案。如果唯一可用的解决方案包含 CSS,请给我完整的代码和我必须在网页中插入代码的确切位置。

4

2 回答 2

0

在使用 DreamWeaver MX 时,我终于找到了所见即所得的解决方案。这很简单。这个解决方案允许我删除多余的空格,并在构成我的文本区域的大单元格内有一个均匀的行间距。它特别允许我有一个正常的距离:a)单元格的顶部边框和单元格中的第一行文本之间 b)单元格中的最后一行文本和单元格的底部边框之间。我必须指出,我在我网站的所有页面中都添加了过渡 Doctype 声明。这样,我的网站看起来更专业。

我做了什么:

在 DreamWeaver MX 中,我选择了我的第一个主表。CellPad 的编号为空(空白)。我将它设置为 0。所以我有:CellPad = 0,CellSpace = 0,Border = 0。

我选择了我的第二张主桌。我有 CellPad = 3。我将它设置为 2。所以我有:CellPad = 2,CellSpace = 0,Border = 0。

我选择了具有一行三列的标题表。中间的单元格有一张背景图片和一些文字(站点名称、站点 URL 和站点标语)以及插入在第四行文本中的四张非常小的海地国旗图片。左侧的单元格仅包含插入其中的图片。右侧单元格的同上。对于我的标题表,我有:CellPad = 3,CellSpace = 3,Border = 0。我改变了这个,现在我有了:CellPad = 0,CellSpace = 0,Border = 0。对于我的标题表,我还有:宽度 = 100% 和高度 = 162 像素,与中间单元格的背景图片之一高度相同。

我在标题表的左侧选择了图片(150x150 像素):V Space = 空白,H Space = 空白,Border = 空白。我设置:V Space = 0,H Space = 0,Border = 0。右边的图片(137x150 像素)同上。我选择了四个小(15x10 像素)海地国旗之一:V Space = blank,H Space = Blank,Border = 1。我设置:V Space = 0,H Space = 0,我让 Border = 1。同上其他三面小海地国旗。

我左键单击标题表左列内的空间(光标在包含图片的右边框或左边框上闪烁):W = 19% 和 H = 空白。我设置 H = 162。我左键单击标题表中间列内的空间:W = 62% 和 H = 空白。我设置了 H = 162。我左键单击标题表中间列内的空间:W = 19% 和 H = 162。没关系,无需更改。

我进入“显示代码视图”并将光标立即放在代码行中“height="170"”的右侧。我在“显示设计视图”中返回,我看到包含我的标题表的第二个主表的顶部单元格被选中:宽度 = 空白,高度 = 170。我让宽度 = 空白并设置高度 = 162。我保存并且自动地,我的标题只有一行,而不是几行对应于不同高度的表格或单元格。然后我转到页面底部,将第二个主表的高度拉伸到最小可能,并与我的第一个主表的高度相同。

问题出在我的第二个主表的单元格垫和单元格空间及其顶部单元格高度。他们太高了。我不得不减少它们,因为它们彼此相加,并增加了单元格顶部边框和单元格中第一行文本之间的垂直空格。我不得不将我的标题表的单元格板和单元格空间设置为零,因为它们不是必需的。我可以为我的第二个主表设置 cellpad = 0,但我的文本区域中的文本不太好阅读(太靠近垂直边缘)。所以我减少了这个单元格垫(从 3 到 2),因为它也促成了单元格的上边框和单元格中的第一行文本之间的空白 a) 单元格中的最后一行文本和单元格的底部边框。

如果我可以单独设置一个表格单元格的填充而不是设置整个表格的填充,则可以完全防止过多的垂直空白。

将图片的“V 空间”和“H 空间”设置为零并不是必需的,只是一种预防措施。

我观察到水平单元格行和最近的文本行之间的空白默认设置为等于两个段落之间的间距。如果这些 cellpadding 和 cellspacing 未设置为 0,则将母表的 cellpadding 和 cellspacing 添加到此空白区域。

前景:

找到一种方法来单独设置单元格的单元格填充。

找到一种方法,以便 a) 第一行文本(在表格单元格中)与紧邻上方的单元格边框之间的垂直距离低于两个段落之间的间距的高度 b) 最后一行之间的垂直距离文本和下面单元格的边框低于两个段落之间的间距的高度。

获取最新版本的 DreamWeaver,因为我已经使用 MX 超过 10 年了。现在必须提供许多新的 WYSIWYG 选项才能获得我的网页所需的演示文稿。

一有机会就学习如何使用 CSS,因为很明显 CSS 提供了更多的可能性,而且据说嵌套表格会减慢网页的加载速度。

于 2013-05-26T22:44:21.390 回答
0

<p>&nbsp;</p>表格单元格顶部似乎有空段落 ( ) - 请参见下面代码段的第二行:

          <td width="235" height="821" valign="top" bgcolor="#FFFFFF"> 
            <p>&nbsp;</p>
            <ul>
              <li><font color="#0000FF" size="2" face="Arial, Helvetica, sans-serif" align="left"><strong><font face="Courier New, Courier, mono"><a href="../index.htm">Ak&egrave;y</a></font></strong></font></li>
            </ul>

这可以解释你的间距问题

于 2013-05-25T13:58:47.703 回答