分享
 
 
 

Dreamweaver 8 样式呈现工具栏惊鸿一瞥

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

原文作者:Adrian Senior

原文链接:http://www.communitymx.com/content/article.cfm?page=1&cid=EDF1F

翻译:随风逐月

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中看到另一个新功能:我的所有页面元素都有一个虚线轮廓。这让我可以扫一眼就精确查看每个元素的状况。它当然也可以被关闭,但是我喜欢让这个功能一直打开因为它非常的有用。

通过媒体类型转换视图

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

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

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

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

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

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

真是简单得不能再简单了,对吧?你只需建立你的CSS文件并应用页面样式,匹配为之设计的媒体类型即可。Dreamweaver 8将提供优秀的呈现所以你可以精确的看到页面是如何显现的。

Dreamweaver 8所有的优秀新功能中,样式呈现工具栏是我最喜欢的功能。它省却了为不同媒体类型设计的许多麻烦;事实上它(为我们)节约了大量的时间——数以小时计!

结论

在这篇预览文章里我们看到了Dreamweaver 8可以读取并呈现基于媒体类型的样式表。而许多人过去可能还没有使用指定设备或打印的层叠样式表,Dreamweaver 8将会让这个转换成为一件简单的事。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有