当前位置:首页 > 设计在线 > 网页设计 > 设计原理 > 就是酷!Dreamweaver 8样式呈现工具栏惊鸿一瞥

就是酷!Dreamweaver 8样式呈现工具栏惊鸿一瞥

点击次数:32 次 发布日期:2008-11-27 17:50:39 作者:源代码网
源代码网推荐

关键词:Dreamweaver  工具栏

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

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

设置媒体类型

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

 

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

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

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

样式呈现工具栏

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

  选择样式呈现

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

  样式呈现工具栏

源代码网整理以下  1、屏幕
  2、打印
  3、手持设备
  4、投影设备
  5、TTY
  6、TV
  7、打开/关闭CSS

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

 

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

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

通过媒体类型转换视图

源代码网整理以下  既然我们已经在设计视图中打开了页面,那么我们只需要点击媒体类型按钮即可查看我们的页面在不同设备,或真实打印模式上是如何呈现的了。让我们先在打印模式中查看页面。完成此操作我们只需在样式呈现工具栏上点击打印媒体按钮(以红色突出显示部分)。

 

查看我们页面的打印显示效果

源代码网整理以下  不错,哈!这节省了大量花在浏览器中加载和预览的时间。我们现在可以轻松设置网页成为友好的打印机并且在我们设计打印样式时就查看页面的显示效果。

源代码网整理以下  其他的媒体类型同样都是可选择的。你只需为媒体类型定义了样式表并在样式呈现工具栏中选择适当的按钮即可查看在该媒体类型下页面是如何呈现的。当然你可以直接在Dreamweaver 8设计视图中看到结果。我将在手持设备视图完成这个预览。

源代码网整理以下  我们只需再次选择相应的按钮即可在请求的媒体类型中查看我们的页面呈现。(下图中)样式呈现工具栏上的手持设备媒体类型按钮被用红色突出显示。

 

在手持设备格式中查看我们的页面

源代码网整理以下  真是简单9 7 3 1 2 4 8 :
上一页12 下一页 源代码网供稿.

网友评论 (0)
会员中心
设计在线
本站推荐
设计在线之精华