DW MX 2004 的 CSS 新功能(2)

车头小子v

车头小子v

2016-02-19 20:41

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的DW MX 2004 的 CSS 新功能(2),希望大家看完后能赶快学习起来。

  三、CSS Style面板的应用

  在Dreamweaver MX 2004中界面最右边有一列各种选项面板的设置对话框,其中包括“CSS Style”,如图5。


图5

  老版本的DW也有这个CSS Style面板,Dreamweaver MX 2004中只保留了CSS Style的编辑功能,去掉了套用模式(Dreamweaver MX 2004直接在属性面板中套用CSS样式)。Dreamweaver MX 2004在“Rules”面板中提供了更多的CSS功能,如图6。


图6

  在CSS Rule面板中选择一个样式之后,它就会自动切换到该样式的有关选项,我们可以在面板上进行检查和修改。这个面板将CSS样式详细分成了好几大类,针对每一个样式都有详细的参数或选项帮助我们做设置。这样即使我们对CSS的用法不太熟悉,也可以轻松使用它的功能。

  在Rules面板的下方是Relevant CSS面板,在这里有网页内每个部分的CSS详细设置内容。在网页中选定某个区域,Relevant CSS面板就出现相关的CSS设置选项,以及它上一层的 CSS样式,甚至 CSS 是套用的哪一个 HMTL标签都显示得很清楚,若有覆盖过的地方,会用特别的颜色和删除线来提示,如图7。


图7

  四、CSS 语法提示

  我们源代码视图中编辑CSS的时候,只输入一个CSS的样式名称和冒号,然后在空白的地方点击鼠标,Dreamweaver MX 2004会自动弹出一个选单,列出该样式可以使用的参数。如图8。我们只要在弹出的下拉菜单中选择要编辑的CSS样式就可以了,省去自己输入代码的麻烦。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)


图8

  五、实例体验

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  下面我们利用CSS Rule和Relevant CSS面板来设置网页的CSS样式。

  1.在Dreamweaver MX 2004中,提供了已经设置好CSS的网页模板,在Page Designs(CSS)模板中选择第一个模板样式“Two - Columm Left Nav ”,然后将它保存为站点。

  2.下面我们在页面中找到“Feature Title”标题文字,在右边的功能模块中找到并打开“Relevanet CSS”这个界面。

  3.在“CSS Rule”中找到要处理的CSS类别,这里我们找到“h3”。如图9


图9

  4.改变这个“Font-Size”字体大小。原来的大小是“100%”,我们改变它的值为 36 个像素。文字马上变大,如图10


图10

  有了CSS这些新增的功能,我们在编辑网页的时候工作效率更高,效果更好。

展开更多 50%)
分享

猜你喜欢

DW MX 2004 的 CSS 新功能(2)

Web开发
DW MX 2004 的 CSS 新功能(2)

体验DW MX 2004 CSS新功能

Web开发
体验DW MX 2004 CSS新功能

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

DW MX 2004 的 CSS 新功能(1)

Web开发
DW MX 2004 的 CSS 新功能(1)

DW MX 2004新功能:加密FTP

Web开发
DW MX 2004新功能:加密FTP

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

DW MX 2004新功能:图片处理

Web开发
DW MX 2004新功能:图片处理

DW MX 2004代码编辑新功能

Web开发
DW MX 2004代码编辑新功能

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在.NET Framework中轻松处理XML数据(2-2)

在.NET Framework中轻松处理XML数据(2-2)

MySQL的常见错误

MySQL的常见错误
下拉加载更多内容 ↓