1 2 3 4 5 6  下一页

　　三、活用表格美化网页

　　表格的作用不仅仅局限于页面的元素定位、排版布局，在实际的应用我们还可以利用它来美化整个页面。接下来我们就将接触到表格的灵活应用，你会发现：原来表格的世界还可以这么精彩！

　　考虑到现在DreamWeaver、Frontpage等软件的广泛使用，完全用手写代码来编制网页的人越来越少，所以，在制作以下实例的过程中，我们多是利用DreamWeaver来完成前期工作，然后再手工修改代码，最终实现我们所期望的效果。

　　1、一个象素宽的分隔线

　　有时候在网页排版时，我们需要一条细线，用图片似乎有点劳师动众了，其实，这个小问题用表格就能搞定。请看下面的例子：


代码：
＜table width="100%" cellspacing="0" border="0" bgcolor="#000000" height="1" cellpadding="0"＞
＜tr＞
＜td＞＜/td＞
＜/tr＞
＜/table＞


　　在DreamWeaver中的快速通道　

　　在Dreamweaver中插入一个一行一列的表格，表格的属性面板设置如下：

　　

　　切换到原代码视窗，将＜td＞ ＜/td＞中的“ ”去掉就ok了。如下图：

　　

　　说明：其实就是一个高为“1pix”的表格，需要注意的是表格内不要有其他任何内容。如果你还需要其他颜色的分隔线，只需要改变表格的背景色 bgcolor 就可以了。利用这种方法我们还可以制作出细竖线，将表格的宽该为“1”就可以了。

　　练习：试制作出如下的效果




　　2、利用“cellspacing”属性制作细线表格

1 2 3 4 5 6  下一页

推荐给朋友

我想参加相关培训

打印

我对此感兴趣

订阅电子杂志

发表评论