现在位置:中国IDC吧>网页设计>Dreamweaver教程> 文章内容

Dreamweaver8样式呈现工具栏惊鸿一瞥

收藏发布 来源:互联网 作者:中国IDC吧 更新日期:2008-09-30 点击:

  Dreamweaver 8有一个非常有趣并很酷的新特性,样式呈现工具栏。

  样式呈现工具栏允许你轻易的为不同的媒体类型,例如屏幕、手持设备和打印输出进行设计。其他的支持媒体类型有投影设备, TTY(Television Type Devices),以及TV媒体类型。Dreamweaver 8也提供了通过开关CSS显示按钮来打开或关闭所有样式呈现的能力。

设置媒体类型

  当然,要使用这些选项查看页面你需要能为它们创建样式表并设置这些样式表的媒体类型。当我们附加样式表到文档中时Dreamweaver 8 会让我们轻易的做到这点,如图1所示。

  图1:新的附加外部样式表对话框

  这里重大的变化就是从媒体选择列表中选择媒体类型的能力。你可以到在“媒体:”选择列表中的所有选项都是可用的。

  我为我的个人站点使用了三个独立的CSS文件:一个用于屏幕,一个用于打印而第三个用于手持设备。这些CSS文件中每一个文件都在每个页面的头部被链接(附加到了页面),如列表1所示。

点击此图片可以放大观看

列表1:使用媒体类型的附加样式表(蓝色突出显示部分)


样式呈现工具栏

  现在让我们看一下样式呈现工具栏——我们稍后探究他的功能。样式呈现工具栏可以在文档工具栏上右击并选择样式呈现工具栏选项进行显示,如图2所示。当关联菜单上的复选标记显示对勾号标记时,工具栏变成激活状态。

  图2:选择样式呈现

  一旦选择的样式呈现工具栏被添加到文档工具栏,它即整装待用。样式呈现工具栏有七个按钮,图3中所示的每个按钮都有自己特定的图例,如下图所示。

  图3:样式呈现工具栏

  1、屏幕
  2、打印
  3、手持设备
  4、投影设备
  5、TTY
  6、TV
  7、打开/关闭CSS

  要激活任意给定的媒体类型你只需点击相应按钮即可。Dreamweaver 8将为你选择的媒体类型加载相应的CSS文件,而页面则将据此呈现。让我们先从使用一个熟悉的视图——屏幕视图开始。这里屏幕视图按钮被用红色突出显示。

  图4:我们页面在屏幕CSS模式下的呈现

  如果仔细观察,你会在图4中看到另一个新功能:我的所有页面元素都有一个虚线轮廓。这让我可以扫一眼就精确查看每个元素的状况。它当然也可以被关闭,但是我喜欢让这个功能一直打开因为它非常的有用。



上一页12 下一页
收藏此页到网摘/书签:
所有评论

评论列表

用户名: 新注册) 密码: 匿名评论