通行证: 用户 密码 域名空间  下载中心 社区论坛 信息公告 my小屋
联系我们
设为首页
加入收藏

 

qq,asp,php,jsp,xml,sql,.net,编程 程序 网页图象 建站经验 私服
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿
论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图
专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版
社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 韩国素材 | 素材图库 | 广告服务 | 服务
当前位置:首页>>网页设计>>dreamweaver>>正文 新版上线![旧版]
注:打开慢时请稍等

dw精细化网页中表格的外观

http://www.iyit.net  日期:2006-10-9 12:42:01  来源:iyit.net录入  点击:
参加讨论】 表格无疑是网页制作中最为重要的一个对象,因为通常的网页都是依靠表格来进行版面布局和各元素组织的,它直接决定了网页是否美观,内容组织是否清晰。但很多朋友常常忽视对表格的研究,而把目光投向其他的层、图片、特效等等,其实合理的利用表格可以方便的美化你得页面,我们也常常听到有朋友抱怨表格作出的页面单调、粗糙、缺乏变化,也常常听到有人问如何作出1个像素的表格边框。其实在dreamweaver中我们可以非常方便的精细化你的表格,从而使你的网页更加美观精细。我们将分下面三个方面介绍如何在dreamweaver中精细化你的表格。

  一、利用属性面板。

  
dreamweaver
(图一)


  首先我们需要了解两个表格属性面板上的参数:cellpad和cellspace。如图一所示,cellpad是指表格中两个单元格之间的距离,cellspace是指每个单元格与它中间的内容之间的间隔距离。通过改变这两个参数,并配合背景色彩的变化,可以方便的做出1像素的表格边框。

  1、使用object面板插入一个表格,定义表格宽、高及行数和列数。注意此时dreamweaver中插入表格的默认cellpad和cellspace、border都为0。如图二;

  
dreamweaver
(图二)


  2、在属性面板中定义表格的border为0,cellpad为5(这项可使单元格中的内容与单元格边缘之间保持5个像素);cellspace为1(此项使得单元格之间保持1个项素的间距)。如图三;

  
dreamweaver
(图三)


  3、设置表格的背景色#999999,如图四;

  
dreamweaver
(图四)
  4、设置单元格的背景色#ffffff,如图五;

  
dreamweaver
(图五)


  5、在浏览器中预览一下效果,我们可以看到表格呈现一个像素的边框,如图六;

  
dreamweaver
(图六)


  二、利用表格嵌套。

  还是上面的主要原理,我们在利用表格之间的互相嵌套,就可以实现更多的效果。

  1、首先我们绘制一个表格,参照前面的例子设定此表格的cellpad和cellspace的数值和颜色。具体效果如图七;

  
dreamweaver
(图七)


  2、接下来绘制另一个单行单列的表格,设置cellpad=2,cellspace=1具体参数如图八;

  
dreamweaver
(图八)
  3、将第一步中作好的表格移动到第二步中的表格中,此时的表格外观如图九;

  
dreamweaver
(图九)


  我们看到此表格具有双线外框,单线内框。

  4、再修改第二步中的表格为单行双列,在每个单元格中都放置一个第一步中的表格,最后的表格外观如图十;

  
dreamweaver
(图十)


  三、利用样式表美化表格。

  1、直接重新定义,样式表的详细定义我不作介绍,定义表格边框主要是在样式编辑器的border选项中,如图十一;

  
dreamweaver
(图十一)


  width代表上下左右的边框宽度;color可以分别定义上下左右边框的颜色;style可以丁一边框的样式,常用的为solid(实线),其它类型还有:dotted(点线)、dashed(虚线)、double(双线)、groove(槽线)、ridge(脊线)、inset(内陷)、outset(外陷)。不过有几个类型必须是ie5.5以上版本才可以看到的。

  2、重新定义了后的表格外观如图十二;

  
dreamweaver
(图十二)
3、我们取消对的重新定义,单独定义一个.tdstyle样式,具体参数如图十三;

  
dreamweaver
(图十三)


  注意在这里我们定义了顶端和下端的边框宽度为1像素,左右两边的为0。

  4、最后的表格效果见图十四;

  
dreamweaver
(图十四)


  我们可以看到此表格呈现只有横线,没有竖线的外观。

  5、改变上一步中top和left为1,bottom和right为0。表格效果如图十五;

  
dreamweaver
(图十五)


  此时表格呈现类似立体的效果。

  6、上面这个表格感觉不太完美,整个表格的右边和下方无边框。我们可以再定义一个样式.table1,定义此样式的四边都为1像素,并将它附给

编辑:iyit.net [发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇:使用dreamweaver实现交替图像按钮制作
下一篇:dreamweaver mx 2004的flash动画元素
转载请注明来源:www.iyit.net
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。

 相关文章
百度的首页简单吗?新浪的首页复杂吗? dreamweaver网页中实用的制作技巧 dreamweaver经典问题大搜罗
解决deamweaver8中css应用无效问题 如何在dreamweaver中使用库项目 dreamweaver mx 2004的flash动画元素
网页设计必须要注意的五个问题 网页设计引入css样式的五种方式 技巧再现:css网页设计技巧
fireworks网页设计综合实例7 fireworks网页设计综合实例1 fireworks网页设计综合实例4
fireworks网页设计综合实例6 fireworks网页设计综合实例5 网页设计综合实例(上)
网页设计综合实例(下) 网页设计中的文字运用 网页设计制作九大“要点”
dreamweaver mx 2004从零开始(1)
最新更新 热点排行 推荐新闻
dreamweaver网页中实用的制作技巧
dreamweaver经典问题大搜罗
解决deamweaver8中css应用无效问题
如何在dreamweaver中使用库项目
dreamweaver mx 2004的flash动画元素
我的qq被盗走的原因分析
webqq好玩不?大鸟带你一起体验
奇奇怪怪的qq密技十五招
qq被盗到出售过程详解
微软winxp sp3再次跳票 推至08年发布
google苹果合作浏览器 防恶意网站
微软操作系统实现开源?
网管应当如何管理windows操作系统?
让windows xp系统锁定期间拒绝关机
windowsvista中文版11月30日正式发布
dreamweaver经典问题大搜罗
dreamweaver mx 2004的flash动画元素
dreamweaver网页中实用的制作技巧
解决deamweaver8中css应用无效问题
dw精细化网页中表格的外观
合并vcd片断、快速删除文件夹--dos命令
dos教程 dos命令基础应用
低格、分区、高格的应对--dos命令应用
破解qq密码如此简单 
一劳永逸--批处理命令(一)
qq2006 beta3隆重发布 实用功能一一奉
美国微软总部相中重庆15岁网络奇才(图
qq号码激活的常见问题及案例分析 
sql server安装文件挂起错误解决办法
三分钟让你的系统变处女:acronis tru
dreamweaver mx 2004的flash动画元素
dw精细化网页中表格的外观
dreamweaver mx 2004从零开始(1)
我的qq被盗走的原因分析
webqq好玩不?大鸟带你一起体验
奇奇怪怪的qq密技十五招
qq被盗到出售过程详解
google苹果合作浏览器 防恶意网站
网管应当如何管理windows操作系统?
让windows xp系统锁定期间拒绝关机
windowsvista中文版11月30日正式发布
google优化网站管理员指导方针
hilltop算法- 探索google排名新算法

设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接
copyrights © 2004-2006 iyit.net all rights reserved.
网站合作、广告联系qq:147007642、466949678
易特网络技术 点击这里给我发消息