| 域名空间 下载中心 社区论坛 信息公告 my小屋 |
![]() |
联系我们 设为首页 加入收藏 |
|
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿 论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图 专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版 社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 韩国素材 | 素材图库 | 广告服务 | 服务 |
| 新版上线![旧版] | |||||
注:打开慢时请稍等
dw精细化网页中表格的外观http://www.iyit.net 日期:2006-10-9 12:42:01 来源:iyit.net录入 点击: |
一、利用属性面板。 ![]() (图一) 首先我们需要了解两个表格属性面板上的参数:cellpad和cellspace。如图一所示,cellpad是指表格中两个单元格之间的距离,cellspace是指每个单元格与它中间的内容之间的间隔距离。通过改变这两个参数,并配合背景色彩的变化,可以方便的做出1像素的表格边框。 1、使用object面板插入一个表格,定义表格宽、高及行数和列数。注意此时dreamweaver中插入表格的默认cellpad和cellspace、border都为0。如图二; ![]() (图二) 2、在属性面板中定义表格的border为0,cellpad为5(这项可使单元格中的内容与单元格边缘之间保持5个像素);cellspace为1(此项使得单元格之间保持1个项素的间距)。如图三; ![]() (图三) 3、设置表格的背景色#999999,如图四; ![]() (图四) 4、设置单元格的背景色#ffffff,如图五; ![]() (图五) 5、在浏览器中预览一下效果,我们可以看到表格呈现一个像素的边框,如图六; ![]() (图六) 二、利用表格嵌套。 还是上面的主要原理,我们在利用表格之间的互相嵌套,就可以实现更多的效果。 1、首先我们绘制一个表格,参照前面的例子设定此表格的cellpad和cellspace的数值和颜色。具体效果如图七; ![]() (图七) 2、接下来绘制另一个单行单列的表格,设置cellpad=2,cellspace=1具体参数如图八; ![]() (图八) ![]() (图九) 我们看到此表格具有双线外框,单线内框。 4、再修改第二步中的表格为单行双列,在每个单元格中都放置一个第一步中的表格,最后的表格外观如图十; ![]() (图十) 三、利用样式表美化表格。 1、直接重新定义,样式表的详细定义我不作介绍,定义表格边框主要是在样式编辑器的border选项中,如图十一; ![]() (图十一) width代表上下左右的边框宽度;color可以分别定义上下左右边框的颜色;style可以丁一边框的样式,常用的为solid(实线),其它类型还有:dotted(点线)、dashed(虚线)、double(双线)、groove(槽线)、ridge(脊线)、inset(内陷)、outset(外陷)。不过有几个类型必须是ie5.5以上版本才可以看到的。 2、重新定义了后的表格外观如图十二; ![]() (图十二) ![]() (图十三) 注意在这里我们定义了顶端和下端的边框宽度为1像素,左右两边的为0。 4、最后的表格效果见图十四; ![]() (图十四) 我们可以看到此表格呈现只有横线,没有竖线的外观。 5、改变上一步中top和left为1,bottom和right为0。表格效果如图十五; ![]() (图十五) 此时表格呈现类似立体的效果。 6、上面这个表格感觉不太完美,整个表格的右边和下方无边框。我们可以再定义一个样式.table1,定义此样式的四边都为1像素,并将它附给 编辑:iyit.net [发送给好友] [打印本页] [关闭窗口] [返回顶部] 上一篇:使用dreamweaver实现交替图像按钮制作 下一篇:dreamweaver mx 2004的flash动画元素 转载请注明来源:www.iyit.net 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。 |
| 最新更新 | 热点排行 | 推荐新闻 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接 |
| |||||||