网页设计-技术进阶.pptVIP

第5章 网页设计技术进阶 * 5.1 CSS技术补充——滤镜 5.2 Dreamweaver中设计绘图层 5.3 Dreamweaver中的行为开发 5.4 网站开发简介 5.1 CSS技术补充——滤镜 5.1.1 滤镜简介 5.1.2 通道Alpha 5.1.3 模糊和运动模糊 5.1.4 光晕Glow 5.1.5 对称变换Flip 5.1.6 波浪Wave 5.1.7 其它效果简介 5.1.1 滤镜简介 滤镜不符合CSS标准，是微软公司为增强浏览器功能而特意 开发的，并整合在IE浏览器中的一类功能的集合。 滤镜分为基本滤镜和高级滤镜。 基本滤镜通常指可以直接作用在对象上，能立即生效的滤镜。 主要有以下几种类型： 通道Alpha、对称变换Flip、波浪Wave； 模糊效果Blur、运动效果MotionBlur； 透明色Chroma、灰色Gray、反色Invert； 下落阴影DropShadow、阴影Shadow、光晕Glow、遮罩Mask； X光效果Xray、浮雕Emboss、Engrave。 高级滤镜指需要配合JavaScript等脚本语言、能产生更多变 幻效果的滤镜，例如： BlendTrans(渐隐变换)、RevealTrans(变换)、Light(灯光) 5.1.2 Alpha滤镜 Alpha滤镜用于设置透明度。 定义格式： Filter: alpha ( opacity=…, finishopacity=…, style=…, startX=…, startY=…, finishX=…, finishY=… ); opacity：透明等级，0~100(透明~不透明) 透明就是让背后的图案、颜色或文字等显示出来了。默认不透明。 finishopacity：最后的透明等级 style：透明区域的形状特征. 0—统一形状，1—线形，2—圆形放射渐变，3—矩形放射渐变； 当style取2或3时，startX等坐标参数没有意义。 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 style .alpha{filter:alpha(opacity=50)} /style /head body bgcolor=#006666 img src=jimao.gif width=350 height=100 img src=jimao.gif width=350 height=100 class=alpha /body /html 【例5-1】半透明 5.1.3 模糊Blur和运动模糊MotionBlur 1）模糊Blur filter: progid:DXImageTransform.Microsoft.Blur (makeshadow, pixelradius= …, shadowopacity=…); makeshadow：设置是否被处理为阴影，值：true/false(默认)。 pixelradius：设置模糊效果的作用深度(程度)，值:1~100(默认2)； shadowopacity：在 makeshadow值为true时起作用，设置阴影的透明度， 值：0.0~1.0(透~不透), 默认0.75。 注： makeshadow值取false时按正常色彩显示对象；值取true时对象内容不作模糊处理，而是将对象内容转化为黑色，并添加模糊效果，再利用shadowopacity控制阴影的透明度。 2）运动模糊MotionBlur filter: progid:DXImageTransform.Microsoft. MotionBlur (add=…, direction=…, strength=…); add：指定是否叠加原图片，值：true (默认)/false； direction：设置模糊的方向。按顺时针，0度代表垂直向上，默认270度； strenth：指定有多少象素的宽度受到模糊影响。 html head style .Blur{ filter: progid:DXImageTransform.Microsoft.Blur (make