当前位置: > 资源 > 常用软件 >

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2
栏目分类:常用软件   发布日期:2019-03-08   浏览次数:

在设计制作网页时,有时需要用一些边框来装饰页面,很多同学员会利用表格来实现。但是在制作过程中,大家会发现使用表格的边框,其效果并不好,所以今天我来给大家介绍一个小技巧,来实现细线边框/表格。 具体方法(以制作一个200像素宽120像素高的边框为例

在设计制作网页时,有时需要用一些边框来装饰页面,很多同学员会利用表格来实现。但是在制作过程中,大家会发现使用表格的边框,其效果并不好,所以今天我来给大家介绍一个小技巧,来实现细线边框/表格。

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

具体方法(以制作一个200像素宽120像素高的边框为例)

1、插入一个1行1列的表格,设置表格属性(如下图)。其中行数和列数都为1,宽度200像素,边框为0,边距为0,间距为1。

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

点击确定后,查看表格的属性栏。边距对应的是cellpad,间距对应的是cellspace。它们具体指什么,会在文章最后的“原理解释”部分说明。

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

2、插入表格后,让我们使用“拆分”视图,在可以看到设计效果的同时更改代码视图中的标签属性。首先为表格加上高度值,即在<table>标签中加上height="120"这样一个属性(如下图)

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

3、接着我们要利用table和td的bgcolor这一属性来制作细线表格,其中table的背景颜色属性bgcolor="#999999",td的背景颜色属性bgcolor="#ffffff"(如下图)。

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

4、预览一下,细线边框/表格就制作完成了。下图为完整的代码显示。

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

5、原理解释:

①细线边框/表格制作的思路:利用表格和单元格的背景颜色属性,来造成视觉上的边框/表格效果。

②表格的代码解释:在HTML超文本标记语言中,表格是按照“表格-行-列”这个顺序进行标记的(列也就是单元格),由于每个标记都是成对出现,所以表格与行、列的标记是嵌套实现的,格式如下图。

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

一个表格只能用一对<table></table>标记,但一个表格中可以有多个行,即多对<tr></tr>,每行当中也可以有多个列(单元格),即多对<td></td>。例如下图为2行3列的表格:

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

<tr>当中一般不写属性,而table和td的属性都只能写在起始标签中,即<table>和<td>中。这也是HTML的语法规则之一。

③cellpad和cellspace的区别:两个属性到了代码视图,看到的是cellpadding和cellspacing。它们的区别是什么呢,请看下图:

制作细线边框/表格——Dreamweaver初学者小技巧应用系列2

 

所以我们制作一个border=0的表格,设置其cellspacing=1,再分别将table和td的背景颜色设置成灰色和白色,由于表格和单元格之间存在1像素的空隙,因此从视觉上看就是一个1像素的细线边框/表格。

以上就是在DW中制作细线边框/表格的方法,希望对大家的学习有所帮助。随着大家学习的深入,会发现这个效果也可以利用CSS来实现,我也会在后续的文章中陆续为大家讲解。下一篇文章,将讲解Dreamweaverr初学者小技巧应用系列3--实现页内或跨页定点位置跳转(即锚点如何使用),欢迎大家继续关注!感谢浏览!

相关热词:

js特效 教程 资源 资讯