您好,欢迎来到素彩网!

Dreamweaver技巧:朦胧就是美

来源:sc115.com | 324 次浏览 | 2011-06-29

标签: Dreamweaver Dreamweaver技巧 朦胧就是美 Dreamweaver综合教程

在网页的图片处理中,半透明是经常要用到的图片效果,它可以半遮半现地显示图片下面的元素。利用这一点我们可以做出很多种效果,例如烟雾效果等。今天在这里就讨论如何在Dreamweaver4中设置和使用这种效果。

设置步骤:

  1.在Dreamweaver4中点“window”→“CssStyles”(或按键盘的“shift+F11”),调出CSSStyles窗口。

  2.在CSSStyles窗口中,单击右下角的加号,弹出NewStyle窗口。图中的“Name”是建立的Class的名称,Class名字的格式是“.XXXXX”(前面一定要有个点);“Type”的右边有三个选项,由上到下分别是:建立一个Class、重新定义标签(网页元素)、选择伪类;“Define”的右边有两个选项:上面指建立外部的CSS文件(选中这个后,你所建立的CSS不是嵌入你的网页,而是成为单独的一个CSS文件,供网页调用,大网站都是此种做法);“thisDocumentonly”是指直接在当前页中建立CSS。

  3.点“OK”,弹出一个大窗口Styledefinitionfor.clarity,我们按照图2设置。
在图2中,除了*Filter外,别的选项不要管它。在*Filter右边的下拉菜单中选择Alpha。也许你已经注意到了图2中的这一段代码“Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)”里面有很多问号,这些需要我们用参数来代替它们:

  (1)“Opacity”代表透明度水准。它的范围是0~100,其实就是百分比的意思。如果想变为全透明,就用0代替Opacity后面的问号;

  (2)“FinishOpacity”是用来指定结束时的透明度。其范围跟Opacity一样(FinishOpacity为可选参数,不想要的话可以去掉它。);

  (3)“Style”是指定透明区域的形状特征。0代表统一形状,1代表线形,2代表放射形,3代表长方形;

  (4)“StartX”与”StartY”代表渐变效果开始的X与Y坐标。一般我们设置为StartX=0,StartY=0(这样表示透明效果是从图片的左上角开始);

  (5)“FinishX”与“FinishY”代表渐变效果结束时的横纵坐标。这里很关键,填什么数值那就要看你的图片的高与宽了,假设我们的图片高与宽分别是100、200像素,那么就可以写成FinishX=200,FinishY=100。(如果你只想要一半的面积是透明,那么可以设置成FinishX=100,FinishY=50)。

  设置好这些参数后,就点击“OK”。设置的步骤到此就算完成了。

使用步骤:

  1.在Dreamweaver4中插入一图,假设其像素高为100,宽为200(为了能看到效果,这里把网页的背景设为鲜红。

  2.再次调出CSSStyles窗口(参见设置步骤),在CSSStyles窗口中,应该有个Clarity,

  3.选中刚才插入的图,用鼠标单击“Clarity”。

  4.到这里就大功告成了。你可以按键盘的F12来预览一下。(注意,这种特效在编辑状态下是不可见的,一定要在预览状态下才可见。)

搜索: Dreamweaver Dreamweaver技巧 朦胧就是美 Dreamweaver综合教程 

最热-Dreamweaver综合教程

Macromedia Dreamweaver 安装及使用教程(三)

用Dreamweaver测试主页

Micromedia Dreamweaver UltraDev 安装及使用教程(一)

UltraDev4.0使用中一些常见

DreamWeaver表格妙用-线框打造详解(三)

关于“层”定位的问题的解答

Dreamweaver3.0疑难解答(下)

Dreamweaver处理word文档有妙招

DW编主页的一个小问题

DreamWeaver表格妙用-线框打造详解(二)

层的应用及其定位(三)

驯服不听话的网页表格

在使用Dreamweaver打造主页的时候往往需要改变表格的高度。然而

素材
多种冰激凌和蛋糕PNG图标多种冰激凌和蛋糕PNG图标
精美蔬菜高清图片4精美蔬菜高清图片4
精美蔬菜高清图片2精美蔬菜高清图片2
精美蔬菜高清图片3精美蔬菜高清图片3
精美蔬菜高清图片1精美蔬菜高清图片1
景观效果图素材景观效果图素材
景观效果图素材景观效果图素材
手机高清图片手机高清图片
景观效果图素材景观效果图素材