现在的位置: 首页 >> 网页设计 >> Dreamweaver >> 细品DW MX 2004表格设计
添加时间:2005-10-23 来源:网教中国 作者: 孤独笑
细品DW MX 2004表格设计

  Dreamweaver MX 2004的强大功能以及更加完善的人性化设置已经深受大家喜爱。在此笔者就谈谈该软件新版本中的表格设计。

  表格在网页中的重要性不言而喻:网页的框架、结构都要通过合理的表格布局来完成和实现。

  在Dreamweaver MX2004中(以下简称DW MX 2004),插入表格的界面和以前的对话框已经起了很大的变化(图1)。


  其中的Table Size虽然变化不大,但是下边新增加的功能着实方便了不少:例如新增加的表格标题、布局功能以及附加信息显示功能。

  在Header中,如果选择第一项None则与一般表格没任何区别,选择第二个Left呢?图2是选择Left后创建的表格。


  其中的“表格”二字就是“Accessibility”中“Caption”处填入的表格标题来看看代码:

  <table width=″50%″  border=″0″ cellspacing=″0″ cellpadding=″0″ summary=″新表格功能演示!″>
  <caption>
  表格
  </caption>
  <tr>
  <th scope=″row″>&nbsp</th>
  </tr>
  </table>
  看出不同了吧,原来<td>的标签处变成了<th scope=″row″>,而且为表格写入的摘要“新表格功能演示”也出现在表格的属性当中,在这个表格里输入的文字都将会以默认的居中粗体显示出来(图3)。


  这样对于要求标题以默认粗体显示的表格,省去了每次手工执行“加粗→居中”的步骤,提高了工作效率。以之相似,我们也可以自己定义表格的其他格式和风格而无须借助于编写复杂的CSS风格表代码的方法,非常方便。

  新的表格辅助宽度显示功能也很人性化。以前的Dreamweaver版本表格的宽度没有一个直观的表达,在做图以及布局时不能很好地把握。而现在当你把鼠标移到表格上时,首先会发现有一个红色的框(图4)。


  此时表明你已经选定了一个表格,但这种选定只是DW MX 2004将你的鼠标与表格进行了绑定,而非“选定”,点鼠标左键后才选中表格。老版本里常因为表格太多不能准确选中,现在有了红色框的帮助就方便多了!

  当选中表格后,辅助宽度显示将自动出现在表格的下方,显示出当前表格的宽度并以百分比和像素两种数值显示(图5)。


  点击绿色倒置的小三角,在出现的下拉列表框中可以选中整个表格、清除所有的定义行高、清除所有的定义行宽以及设置所有宽度一致、隐藏辅助宽度显示等功能,这些都是经常用到的重要功能,过去需要自己手工调整,现在则整合在一个菜单里了。

  如今在DW MX 2004中已经可以很方便地对表格进行拖放操作,而且如果你对表格分列,它会将该列的宽度显示出来,这样做一个和表格宽度相同的图片就可以从这里直接取图片尺寸值了,不用担心做出来的图片尺寸问题了!

  最后介绍一下表格中的插入行和列的功能,在老版本中我们插入时行只能插入到当前光标行的上方,列则是插入到光标列的左侧。现在DW MX 2004可要灵活多了,可以将行插于下方,也可以将列插入到光标列的右侧,且只须进行相关菜单操作即可(图6)。


  看了上述表格设计的新功能是不是已经有些激动了?那就动手试一试吧,还有很多神奇的地方呢!


上一篇:Fw与Dw结合:看实例学切片 下一篇:细品DW MX 2004内建FW技术
大部分文章摘自网上,如有侵犯您的权益请与我们联系,我们会第一时间进行处理,谢谢! [ 打印文章 ] [ 关闭窗口 ]
推荐文章
·Dreamweaver快速制作细边线表格
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·网页图片特效小技巧
·网页菜单详解(2):初步实现
·如何制作会移动的广告条
·巧使网页图片产生旋转效果
·在Dreamweaver中自动设置网页的
·Dreamweaver行为全接触(1)
相关文章
·细品DW MX 2004内建FW技术
·细品DW MX 2004内建FW技术
·细品DW MX 2004表格设计
最新文章
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
·DreamweaverMX2004 多媒体教程(
Google