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

goodluck

<>　　Dreamweaver 8有一个非常有趣并很酷的新特性，样式呈现工具栏。</P><>　　样式呈现工具栏允许你轻易的为不同的媒体类型，例如屏幕、手持设备和打印输出进行设计。其他的支持媒体类型有投影设备, TTY(Television Type Devices)，以及TV媒体类型。Dreamweaver 8也提供了通过开关CSS显示按钮来打开或关闭所有样式呈现的能力。</P><H4>设置媒体类型</H4><>　　当然，要使用这些选项查看页面你需要能为它们创建样式表并设置这些样式表的媒体类型。当我们附加<a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a>到文档中时Dreamweaver 8 会让我们轻易的做到这点，如图1所示。</P>< align=center><IMG alt="" src="http://edu.itbulo.com/UploadFiles_1485/200603/20060327214142963.gif" border=0></P>< align=center>　　<STRONG>图1：</STRONG><EM>新的附加外部<a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a>对话框</EM></P><>　　这里重大的变化就是从媒体选择列表中选择媒体类型的能力。你可以到在“媒体：”选择列表中的所有选项都是可用的。</P><>　　我为我的个人站点使用了三个独立的CSS文件：一个用于屏幕，一个用于打印而第三个用于手持设备。这些CSS文件中每一个文件都在每个页面的头部被链接（附加到了页面），如列表1所示。</P>< align=center><A href="http://edu.itbulo.com/UploadFiles_1485/200603/20060327214143866.gif&amp;namecode=pcedu&amp;subnamecode=pcedu_index" target=_blank><IMG alt=点击此图片可以放大观看 src="http://edu.itbulo.com/UploadFiles_1485/200603/20060327214143132.gif" border=0></A></P>< align=center><STRONG>列表1：</STRONG><EM>使用媒体类型的附加<a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a>(蓝色突出显示部分)</EM></P>< align=center><BR clear=all></P><H4>样式呈现工具栏</H4><>　　现在让我们看一下样式呈现工具栏——我们稍后探究他的功能。样式呈现工具栏可以在文档工具栏上右击并选择样式呈现工具栏选项进行显示，如图2所示。当关联菜单上的复选标记显示对勾号标记时，工具栏变成激活状态。</P>< align=center><IMG alt="" src="http://edu.itbulo.com/UploadFiles_1485/200603/20060327214143589.gif" border=0></P>< align=center>　　<STRONG>图2：</STRONG><EM>选择样式呈现</EM></P><>　　一旦选择的样式呈现工具栏被添加到文档工具栏，它即整装待用。样式呈现工具栏有七个按钮，图3中所示的每个按钮都有自己特定的图例，如下图所示。</P>< align=center><IMG alt="" src="http://edu.itbulo.com/UploadFiles_1485/200603/20060327214144769.gif" border=0></P>< align=center>　　<STRONG>图3：</STRONG><EM>样式呈现工具栏</EM></P><>　　1、屏幕<BR>　　2、打印<BR>　　3、手持设备<BR>　　4、投影设备<BR>　　5、TTY<BR>　　6、TV<BR>　　7、打开/关闭CSS</P><>　　要激活任意给定的媒体类型你只需点击相应按钮即可。Dreamweaver 8将为你选择的媒体类型加载相应的CSS文件，而页面则将据此呈现。让我们先从使用一个熟悉的视图——屏幕视图开始。这里屏幕视图按钮被用红色突出显示。</P>< align=center><IMG alt="" src="http://edu.itbulo.com/UploadFiles_1485/200603/20060327214144924.gif" border=0></P>< align=center>　　<STRONG>图4：</STRONG><EM>我们页面在屏幕CSS模式下的呈现</EM></P><>　　如果仔细观察，你会在图4中看到另一个新功能：我的所有页面元素都有一个虚线轮廓。这让我可以扫一眼就精确查看每个元素的状况。它当然也可以被关闭，但是我喜欢让这个功能一直打开因为它非常的有用。</P><></p><p align='center'><b><font color='red'>[1]</font> <a href='http://edu.itbulo.com/200603/91738_2.htm'>[2]</a> <a href='http://edu.itbulo.com/200603/91738_2.htm'>下一页</a></b></p><div class="box_art_07"><div id="left03"></div></div><div id="rrxgxx">关注此文的读者还看过：</div><div id="rrxgxx1"><ul><li>2009-9-24 12:36:39 <a class='LinkAC' href='http://edu.itbulo.com/200909/126286.htm' target="_blank">去除Dreamweaver表格宽度辅助线</a></li><li>2008-6-9 12:15:04 <a class='LinkAC' href='http://edu.itbulo.com/200806/124321.htm' target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></li><li>2008-4-15 18:39:07 <a class='LinkAC' href='http://edu.itbulo.com/200804/123795.htm' target="_blank">Dreamweaver CS3中Spry详细区域功能</a></li><li>2008-4-10 18:42:44 <a class='LinkAC' href='http://edu.itbulo.com/200804/123695.htm' target="_blank">网站设计师职业生涯状况及前景</a></li><li>2008-4-10 18:41:32 <a class='LinkAC' href='http://edu.itbulo.com/200804/123694.htm' target="_blank">如何制作出非常美观的网页</a></li><li>2008-4-8 20:50:12 <a class='LinkAC' href='http://edu.itbulo.com/200804/123660.htm' target="_blank">建立自己的博客的过程中学习到的知识</a></li><li>2008-4-7 21:19:58 <a class='LinkAC' href='http://edu.itbulo.com/200804/123633.htm' target="_blank">网站栏目和页面的策划</a></li><li>2008-3-24 18:47:21 <a class='LinkAC' href='http://edu.itbulo.com/200803/123400.htm' target="_blank">海量素材的准确位置和用途</a></li></ul></div></div><!--最新文章--><div id="left04"></div><!--评论--><div id="rrxgpl"><ul><span class="cDRed">用户评论</span></ul></div><!--评论开始--><script language=javascript>function refreshimg(){  document.all.checkcode.src='http://img.itbulo.com/Inc/CheckCode.asp?'+Math.random();}</script><script language='JavaScript' type='text/JavaScript'>   function Check()   {    if (document.form1.Name.value=='')    {     alert('请输入姓名！');     document.form1.Name.focus();     return false;    }    if (document.form1.Content.value=='')    {     alert('请输入评论内容！');     document.form1.Content.focus();     return false;    }return true;   }   </script><div class="yzsmpl"><b>评论内容：</b>不能超过100字，需审核，请自觉遵守互联网相关政策法规。</div><div class="globalComments"><table cellSpacing="1" cellPadding="3" width="95%"  border="0" align="center"><form action="/Comment.asp" onsubmit="return Check();" method="post" name="form1" id="form1"><tr><td class="title12"><table width="100%" border="0" cellspacing="3"><tr><td>发表评论：</td><td><input name="anonymous" type="checkbox" value="1" checked="checked"/>                        匿名发表</td><td>用户名:<Input name="Name" type="text" id="Name" size="16" value="部落网友" maxLength="16" class="input1" /></td><td><font color="#999999">有 <span id="CommentCount">loading</span> 位网友发表了评论　<a href="/Comment.asp?Articleid=91738&Action=ShowAll" target="_blank">查看评论</a></font></td></tr></table></td></tr><tr><td class="title12"><center><table width="100%" border="0"><tr><td><div class="editorContent"><textarea name="Content" rows="5" cols="45" id="Content" onpropertychange="if(value.length>100) value=value.substr(0,100);sNum.innerText=this.value.length;" onkeyup="" style="background:url(http://img.itbulo.com/images/pllogo.gif) center no-repeat #fff;"></textarea></div></td><Input id="Action" type="hidden" value="Save" name="Action" /><Input id="ArticleID" type="hidden" value="91738" name="ArticleID" /><td>(<FONT color=red><SPAN id=sNum>0</SPAN></FONT>/100)<input type="image" src="http://img.itbulo.com/images/kp_submit.jpg" value="发送" onclick="ShowComment();" /></td></tr></table></center></td></tr></form></table></div><!-- 评论代码结束 --></div></div><div id="fleft"><img src=http://img.itbulo.com/images/zfbg.gif width="25" height="400"></div><!--右侧--><div id="slistr" class="right"><!-- 赞助A --><div id="right01"></div><!-- 最新 --><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 最新文章</span></div><div class="crc list"><ul><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200806/124321.htm" target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></td><td align="left" width="34" class="tj1">06-09</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123795.htm" target="_blank">Dreamweaver CS3中Spry详细区域功能</a></td><td align="left" width="34" class="tj1">04-15</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123695.htm" target="_blank">网站设计师职业生涯状况及前景</a></td><td align="left" width="34" class="tj1">04-10</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123694.htm" target="_blank">如何制作出非常美观的网页</a></td><td align="left" width="34" class="tj1">04-10</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123660.htm" target="_blank">建立自己的博客的过程中学习到的知识</a></td><td align="left" width="34" class="tj1">04-08</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123633.htm" target="_blank">网站栏目和页面的策划</a></td><td align="left" width="34" class="tj1">04-07</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123366.htm" target="_blank">页面设计中的层次感</a></td><td align="left" width="34" class="tj1">03-21</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123296.htm" target="_blank">改进网站设计提供的有意的建议</a></td><td align="left" width="34" class="tj1">03-18</td></tr><tr></tr></table></ul></div></div><!-- 设计相关 --><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://edu.itbulo.com/show/" class="cDRed1">平面设计作品欣赏</a><a href="http://edu.itbulo.com/show/poster/">海报</a><a href="http://edu.itbulo.com/show/bz/">包装</a><a href="http://edu.itbulo.com/show/biaoz/">标志</a><a href="http://edu.itbulo.com/show/chahua/">插画</a><a href="http://edu.itbulo.com/show/ads/">招贴</a></span></div><div class="crc1 list1"><ul><table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'><tr valign='top'><td align='center'><a class="" href="http://edu.itbulo.com/200912/128018.htm" title="rudy hurtado 标志设计（二）" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009121016101973.gif'  width='130' height='98' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/128018.htm" title="rudy hurtado 标志设计（二）" target="_blank">rudy hurtado 标志设计（二）</a></td><td align='center'><a class="" href="http://edu.itbulo.com/200912/127984.htm" title="创导国际标志设计作品欣赏" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009120918040463.gif'  width='130' height='98' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127984.htm" title="创导国际标志设计作品欣赏" target="_blank">创导国际标志设计作品欣赏</a></td></tr></table></ul></div></div><!-- 推荐 --><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 推荐文章</span></div><div class="crc list"><ul><li>此栏目下没有推荐文章</li></ul></div></div><!-- IT职场 --><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/" class="cDRed1">软件学院</a>" 焦点图文</span></div><div class="crc1 list1"><ul><table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'><tr valign='top'><td align='center'><a class="" href="http://edu.itbulo.com/200912/127997.htm" title="hotoshop制作千与千寻的DVD封面" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009121010160758.gif'  width='130' height='90' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127997.htm" title="hotoshop制作千与千寻的DVD封面" target="_blank">hotoshop制作千与千寻的DVD封面</a></td><td align='center'><a class="" href="http://edu.itbulo.com/200912/127873.htm" title="hotoshop制作简洁红色圣诞壁纸" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009120521123294.gif'  width='130' height='90' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127873.htm" title="hotoshop制作简洁红色圣诞壁纸" target="_blank">hotoshop制作简洁红色圣诞壁纸</a></td></tr></table></ul></div></div><!-- 赞助B --><div id="right02"></div><!-- 热门 --><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 热门文章</span></div><div class="crc list"><ul><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123694.htm" target="_blank">如何制作出非常美观的网页</a></td><td align="left" class="tj1" width="34">28117</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94701.htm" target="_blank">初学解惑：常用CSS样式图文设置教程</a></td><td align="left" class="tj1" width="34">17629</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200806/124321.htm" target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></td><td align="left" class="tj1" width="34">16027</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123295.htm" target="_blank">什么是静态网页和动态网页？</a></td><td align="left" class="tj1" width="34">12799</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200608/103608.htm" target="_blank">Dreamweaver 入门：使用CSS设置页面格式</a></td><td align="left" class="tj1" width="34">12447</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123695.htm" target="_blank">网站设计师职业生涯状况及前景</a></td><td align="left" class="tj1" width="34">10149</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94704.htm" target="_blank">用Dreamweaver自己动手制作网页活动菜单条</a></td><td align="left" class="tj1" width="34">9026</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94630.htm" target="_blank">DW网页设计：制作弹出菜单</a></td><td align="left" class="tj1" width="34">8800</td></tr><tr></tr></table></ul></div></div><!-- 壁纸桌面 --><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://desk.itbulo.com/" class="cDRed1">桌面壁纸</a><a href="http://desk.itbulo.com/star/">明星</a><a href="http://desk.itbulo.com/katong/">卡通</a><a href="http://desk.itbulo.com/game/">游戏</a><a href="http://desk.itbulo.com/scenery/">风景</a><a href="http://desk.itbulo.com/auto/">汽车</a><a href="http://desk.itbulo.com/paint/">艺术</a><a href="http://desk.itbulo.com/feast/">节日</a></span></div><div class="crc"><ul class="ulPic picExtr2"><li><i class="iPic"><a href="http://desk.itbulo.com/200508/30368.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/katong/disney/160/25.jpg" alt="迪士尼-25" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200508/30368.html">迪士尼-25</a></i></li><li><i class="iPic"><a href="http://desk.itbulo.com/200802/75440.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/katong/KTMHTN/160/40.jpg" alt="卡通梦幻童年40" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200802/75440.html">卡通梦幻童年40</a></i></li><li><i class="iPic"><a href="http://desk.itbulo.com/200704/73664.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/design/KrCartoon/160/120.jpg" alt="韩国风格壁纸120" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200704/73664.html">韩国风格壁纸120</a></i></li></ul></div></div><!-- 设计图库 --><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://photo.itbulo.com/" class="cDRed1">素材图库</a><a href="http://photo.itbulo.com/tour/">旅游</a><a href="http://photo.itbulo.com/mrxx/">美容</a><a href="http://photo.itbulo.com/plant/">植物</a><a href="http://photo.itbulo.com/personality/">人物</a><a href="http://photo.itbulo.com/tour/">旅游</a><a href="http://photo.itbulo.com/food/">食物</a><a href="http://photo.itbulo.com/tech/">科技</a></span></div><div class="crc"><ul class="ulPic picExtr2"><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42590.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/frog/120/14.jpg" alt="青蛙-14" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42590.html">青蛙-14</a></i></li><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42555.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/dog/120/19.jpg" alt="小狗写真-19" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42555.html">小狗写真-19</a></i></li><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42592.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/frog/120/16.jpg" alt="青蛙-16" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42592.html">青蛙-16</a></i></li></ul></div></div><!-- 赞助C --><div id="right03"></div></div></div><!-- 底部版权 --><script src='http://img.itbulo.com/js/10/09_footer.js' language='javascript'></script>