| 5.扩展的CSS支持 在网页中插入视频文件以后，我们再在它的下方输入一段文字来体验一下Dreamweaver8 的CSS支持给我们带来了哪些新变化？使用文本工具输入一段文字，然后打开CSS面板，如图23所示。 
图23 新的CSS面板完全设计成了一个统一的面板，我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。 单击“添加属性”，可以直接输入样式属性，比如我输入Color，然后在后面的颜色选择器中选择一种颜色就可以了，如图24所示。当然其它CSS属性也可以直接在这里输入，这比起以前要反复修改网页代码真是方便了不少。 
图24 单击CSS面板中的Current按钮，可以显示当前所选中内容的CSS摘要，而与所选内容无关的CSS会以删除线的形式出现，如图25所示。这个功能对我们快速确认应用于当前选定元素的CSS属性十分有帮助，在列表中可以方便地查看哪种样式中的哪种属性被应用到当前选中的元素。新的CSS控制面板可以使我们从复杂的多种CSS样式中解脱出来，从而轻松完成一个网页的内容格式化。 
图25 好了，我们再来看看在可视化助理方面提供了对CSS的新支持。执行“查看/可视化助理”菜单命令，你会发现多了“CSS Layout Backgrounds”、“CSS Layout Box Model”、“CSS Layout Outlines”三个选项，分别为背景模式、框模式和外形轮廓模式显示CSS样式效果。如图26所示。 
图26 (+放大该图片) 另外，还有一个值得我们关注的新功能――样式呈现工具栏，使用这个新功能我们可以为不同的媒体类型进行设计，比如屏幕、手持设备、打印输出设备、电视设备、投影设备等等。当我们将外部样式表附加到文档中时可以指定样式表的类型，下面是建立好的三个样式表文件，分别应用于屏幕、打印设备和电视，并已被链接到网页中。 <link href="CSS/Level1_Arial.css" rel="stylesheet" type="text/css" media="screen" />
<link href="CSS/Level2_Arial.css" rel="stylesheet" type="text/css" media="print" />
<link href="CSS/Level3_Arial.css" rel="stylesheet" type="text/css" media="TV" /> 在工具栏上单击鼠标右键，选中“样式呈现”选项，就会在工具栏下方出现“样式呈现”的各个按钮了，如图27中红色框内所示。 
图27 每一个按钮都有自己不同的用途，从左到右依次为屏幕、打印、手持设备、投影设备、TTY、TV和打开/关闭CSS。单击不同的按钮，可以激活相应的媒体类型，与之相关的CSS文件就被加载。
在建立页面的时候，我们只需要建立适合所需要的媒体类型CSS文件，Dreamweaver 8将会精确显示我们设计的页面是如何在相应媒体中应该显示的效果。
|
您现在的位置: 软件资讯 > 创意设计 > 网站设计 > Dreamweaver
