css滤镜中文手册
Introduction To This Book关于此手册
手册说明：
本手册是Rainer's DHTML Library 产品的一部分。
本手册针对的是已有一定网页设计制作经验的读者。其目的是提供完整清晰的样式滤镜的快速索引及进阶帮助。所以对于网页制作和样式表的基础知识，仅简单介绍，恕不赘述。
本手册以浏览器的事实标准——Internet Explorer 为主。
手册中为所有的滤镜，除了基本的语法示范外，都度身制作了可以对照源代码即时察看运行演示的实例。
本手册的升级信息与版权声明请参阅关于本书页面。
本书中涉及到的所有HTML对象(Object，Element)，HTML属性(Attributes)和特性(Properties)请参阅我的相关著作。
End User License Agreement最终用户许可协议
重要须知：
本《最终用户许可协议》（以下称《协议》）是您（个人或单一实体）与苏昱之间有关苏昱之作品的法律协议。本作品包括计算机软件，并可能包括相关媒体、印刷材料，电子文档，图片。还包括对苏昱提供给您的原作品的任何更新和补充资料。您一旦安装、复制、下载、访问或以其它方式使用本作品，即表示您同意接受本《协议》各项条款的约束。如您不同意本《协议》中的条款，请不要安装或使用本作品。
协议条款：
本作品受著作权法及国际著作权条约和其它知识产权法和条约的保护。
本作品（包括但不限于本作品中所含的任何图象、照片、动画、录像、录音、音乐、文字和附加程序）、随附的印刷材料、及本作品的任何副本的产权和著作权，均由苏昱或相关作者拥有。
本《协议》授予您下列权利：您可以安装、使用、访问、显示、运行本作品。您可以保留多份副本，可以自由传播本作品。
上述权利不适用于您的任何商业行为或商业用途。否则您务必与苏昱联系。
苏昱不为本"软件产品"做任何担保。本"软件产品"及任何相关文档以"即此"形式提供，无任何明示的或暗示的担保，包括（但不限于）对可销售性、适用性、或无侵权的暗示担保。使用本"软件产品"所引起的全部风险由您自己承担。
本协议未明示授予的一切其它权利均为苏昱或相关作者所有。对于此处所指的其他权利，如篡改、反编译、改编、引用、拆解（破坏本作品原始完整性）等，同样请您务必与苏昱先行联系。
如您未遵守本《协议》的各项条款和条件，在不损害其它权利的情况下，苏昱可终止本《协议》。如此类情况发生，您必须销毁本作品的所有副本及其所有组成部分。苏昱保留对本产品及本协议的最终修改权。
filters版本：DHTML Object Model数组集合
语法：
Scripting oColl = object.filters
Scripting oObject = object.filters ( vIndex , iSubIndex )
取值：
vIndex : 必选项。整数值(Integer) | 字符串(String)
如果此参数使用的是整数值，则返回数组中的整数序号等于此参数值的要素。如此参数值等于0 则返回数组中的第一个要素。
如果此参数值使用的是字符串值，则返回数组中所有name 或id 属性等于此参数值的要素。假如符合条件的要素数目多于一个，则返回的将是一个数组。
iSubIndex : 可选项。整数值(Integer) 。
当vIndex 参数值为字符串时，数组中所有name 或id 属性等于vIndex 的要素将被作为一个数组获取，而此参数值便用于指定返回此数组中的整数序号等于此参数值的要素。
返回值：
oColl : 数组(Array)。返回作用于object 的滤镜集合。
oObject : 对象(Object)。返回对被object 包含的要素数组中的一个项目的引用。
说明：
获取作用于object 的滤镜集合。
AlphaImageLoader兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader ( sProperties ) "
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizin gMethod='scale');}
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif') ;}
Gradient兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , endColorStr=iWidth )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Gradient ( sProperties ) "
说明：
在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550 000FF, endColorstr=#55FFFF00) ;}
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient() ;}
Alpha兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style=iStyle , opacity=iOpacity , finishOpacity=iFinishOpacity , startX=iPercent , startY=iPercent , finishX=iPercent , finishY=iPercent )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Alpha ( sProperties ) " 说明：
调整对象内容的透明度。
你可以设置整体透明度，或线性渐变和放射渐变的透明度。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);}
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10,finishOpacity=100,style =2);}
BasicImage兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled , grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.BasicImage ( sProperties ) "
说明：
用于色彩处理，图像旋转，或对象内容的透明度。
当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.2); }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.BasicImage(invert=1); }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.BasicImage(invert=1,GrayScale=1); }
Blur兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Blur ( enabled=bEnabled , makeShadow=bShadow , pixelRadius=flRadius , shadowOpacity=fOpacity )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Blur ( sProperties ) "
说明：
制作对象内容的模糊效果。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur() ; }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3.0, makeshadow='true', ShadowOpacity=1.0); }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled='false') ; }
Chroma兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Chroma ( enabled=bEnabled , color=sColor )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Chroma ( sProperties ) " 说明：
将对象中指定的颜色显示为透明。
不建议在8位到24位抖动的图片文件上使用此滤镜。例如保存时会抖动和压缩的JPEG格式图片文件，应用此滤镜，其结果会很难看。
此效果在羽化(柔化色彩以同周围相邻的颜色平和的过渡)的线条等处也不会很好的作用。确定的color 参数值可能会导致图片自身的透明颜色变为不透明。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow'),
progid:DXImageTransform.Microsoft.Chroma(color='red') ; }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow') ; }
Compositor兼容性：IE5.5+
语法：
CSS filter : progid:https://www.doczj.com/doc/755885013.html,positor ( function=sFunction ) Scripting object.style.filter = "progid:https://www.doczj.com/doc/755885013.html,positor ( sProperties ) "
说明：
依据初始对象和新对象色彩的特定混合方式显示新的对象内容。
这个滤镜提供了丰富的将输入对象的色彩和透明度相互作用的图像合成的功能设置。要建立转换滤镜，遵循下列步骤：
1. 选择一个功能( function )。
2. 设置对象的合成滤镜( filter )的属性声明。
3. 确定滤镜对象初始显示的内容。合成功能将此作为输入A 。
4. 使用合成滤镜的apply 方法。捕获对象内容的初始显示，为转换做必要的准备。
5. 改变对象的属性，如visibility ，innerText ，background-color ，border ，或者其子对象的属性。合成功能将此作为输入B 。
6. 使用合成滤镜的play 方法。这会将合成功能输出的图像变化显示出来。
示例：
#idDiv{ filter:progid:https://www.doczj.com/doc/755885013.html,positor(function=20, duration=7);}
DropShadow兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=bEnabled , color=sColor , offX=iOffsetX , offY=iOffsetY , positive=bPositive )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.DropShadow ( sProperties ) "
说明：
制作对象的阴影效果。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive=true); }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.dropshadow(Positive=true) ; }
Emboss兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Emboss ( enabled=bEnabled , Bias=fBias ) Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Emboss ( sProperties ) " 说明：
用灰度值为对象内容制作浮雕纹理效果。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.emboss(enabled='false') ; }
Engrave兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Engrave ( enabled=bEnabled , Bias=fBias )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Engrave ( sProperties ) "
说明：
用灰度值为对象内容制作浮雕纹理效果。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.emboss(enabled='false') ; }
Glow兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Glow ( enabled=bEnabled , color=sColor , strength=iDistance )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Glow ( sProperties ) "
说明：
环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外。
_ 假如对象内有文本而无背景( background )和图片，则每个文本字符将会被辉光环绕。_ 假如对象内有背景( background )或图片，则整个对象容器会被辉光环绕。
_ 假如对象的子对象定位超出了对象边界，则仅仅在对象容器内的内容会被辉光环绕。示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter: glow(Color=blue,Strength=5) ; }
#idDiv{position:absolute; left:140px; height:400; width:400;filter: glow(color=#000000) ; }
Light兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Light ( enabled=bEnabled )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Light ( sProperties ) "
说明：
为对象的内容建立光照效果。
你可以控制光源的虚拟位置，还可以控制光焦点的横纵坐标值。以及光的类型和强度。每个滤镜最多可以添加10 束光。要想在页面上添加更多的光，你必须使用多个滤镜。
当每束光被建立后，都有默认的环境光与之关联。你添加到对象的第一束光会替换掉它的默认的环境光。
示例：
.aFilter { background-color: #FFFFFF; filter:light();color: cyan;width: 150;}
MaskFilter兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.MaskFilter ( enabled=bEnabled , color=sColor )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.MaskFilter ( sProperties ) "
说明：
将对象内容的透明像素用color 参数指定的颜色显示作为一个遮罩，而非透明像素则转为透明。
使用BasicImage 滤镜能够更有效率的实现这一效果。
示例：
DIV.aFilter {filter:mask(color=#008800); width: 100;}
Matrix兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=fM12 , M21=fM21 , M22=fM22 )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Matrix ( sProperties ) " 说明：
使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。
使用此滤镜可以建立下列效果：
7. 左右反转。将M11 和M12 的值取负。
8. 上下反转。将M21 和M22 的值取负。
9. 改变尺寸。将M11 和M12 和M21 和M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。
使用padding 属性能够使最终图像边角被剪切的机会降到最小。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(enabled='false') ; }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand"); }
MotionBlur兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.MotionBlur ( enabled=bEnabled , add=bAddImage , direction=iOffset , strength=iDistance )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.MotionBlur ( sProperties ) "
说明：
为对象内容制作运动模糊效果。
示例：
DIV.aFilter {filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=5,Direction=90);} #oDIV {filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=10, Direction=45, Add='true');}
Shadow兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Shadow ( sProperties ) " 说明：
为对象内容建立阴影效果。
示例：
DIV.aFilter {filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=90);}
#oDIV {filter:progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=45, color=blue);}
Wave兼容性：IE4.0+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage , strength=iDistance )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Wave ( sProperties ) " 说明：
为对象内容建立波纹扭曲效果。
示例：
DIV.aFilter {filter:progid:DXImageTransform.Microsoft.Wave(Strength=5);}
#oDIV {filter:progid:DXImageTransform.Microsoft.Wave(Strength=10, Add=true);}
ICMFilter兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.ICMFilter ( colorSpace=sPathFilename , intent =sIntent )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.ICMFilter ( sProperties ) "
说明：
根据颜色配置文件(.icm)转换对象的色彩内容。这样能激活对某些细节内容的显示改良，或对硬件设备输出的模拟显示。像打印机或显示器。
通过根据要显示内容的类型匹配恰当的Intent 特性值可以改善内容显示或打印的质量。例如，当你打印时，可以设置Intent 特性值为Graphic 从而确保颜色对比度的恰当。较高的对比度能够使打印出的内容清晰易读。
要模拟硬件设备的色彩输出，你必须定位硬件设备的颜色配置文件(.icm)，假如制造商提供了这个文件。将这个颜色配置文件(.icm)的路径和名称指给ColorSpace 特性，并且对硬件装置要使用的内容应用此滤镜。颜色配置文件(.icm)为你的显示器定义了内容的颜色与显示器标准颜色的偏差。这样滤镜显示就可以模拟其他硬件设备的输出。
示例：
#idDiv{ filter:progid:DXImageTransform.Microsoft.ICMFilter(colorSpace=sRGB, intent=Picture);}
Gray兼容性：IE4.0+
语法：
CSS filter : Gray ( enabled=bEnabled )
Scripting object.style.filter = "Gray ( sProperties ) "
说明：
灰度显示对象内容。
使用BasicImage 滤镜可以更有效率的建立效果。
示例：
#idDiv{ height:250px; width:250px; filter:Gray(); }
Invert兼容性：IE4.0+
语法：
CSS filter : Invert ( enabled=bEnabled )
Scripting object.style.filter = "Invert ( sProperties ) "
说明：
反相显示对象内容。
使用BasicImage 滤镜可以更有效率的建立效果。
示例：
#idDiv{ height:250px; width:250px; filter:Invert(); }
Xray兼容性：IE4.0+
语法：
CSS filter : Xray ( enabled=bEnabled )
Scripting object.style.filter = "Xray ( sProperties ) "
说明：
以X光效果显示对象内容。
使用BasicImage 滤镜可以更有效率的建立效果。
示例：
#idDiv{ height:250px; width:250px; filter:Xray(); }
FlipH兼容性：IE4.0+
语法：
CSS filter : FlipH ( enabled=bEnabled )
Scripting object.style.filter = "FlipH ( sProperties ) "
说明：
水平翻转对象内容。
使用BasicImage 滤镜可以更有效率的建立效果。
示例：
#idDiv{ height:250px; width:250px; filter:FlipH(); }
FlipV兼容性：IE4.0+
语法：
CSS filter : FlipV ( enabled=bEnabled )
Scripting object.style.filter = "FlipV ( sProperties ) "
说明：
垂直翻转对象内容。
使用BasicImage 滤镜可以更有效率的建立效果。
示例：
#idDiv{ height:250px; width:250px; filter:FlipV(); }
Redirect兼容性：无
说明：
目前未被支持。
Barn兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Barn ( enabled=bEnabled , duration=fDuration , motion=sMotion , orientation=sOrientation )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Barn ( sProperties ) "
说明：
用模拟开关门效果转换对象内容。
示例：
#idDiv{ filter:progid:DXImageTransform.Microsoft.Barn(function=20, duration=7);}
BlendTrans兼容性：IE4.0+
语法：
CSS filter : BlendTrans ( enabled=bEnabled , duration=fDuration )
Scripting object.style.filter = "BlendTrans ( sProperties ) "
说明：
用渐隐效果转换对象内容。
使用BasicImage 滤镜可以更有效率的建立效果。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:BlendTrans(duration=5); }
Blinds兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Blinds ( enabled=bEnabled , duration=fDuration , bands=iBands , Direction=sDirection )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Blinds ( sProperties ) " 说明：
用百叶窗开关效果转换对象内容。
示例：
#idDiv{ filter:progid:DXImageTransform.Microsoft.Blinds(direction='down');}
CheckerBoard兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.CheckerBoard ( enabled=bEnabled , duration=fDuration , squaresX=iColumns , squaresY=iColumns , Direction=sDirection ) Scripting object.style.filter = "progid:DXImageTransform.Microsoft.CheckerBoard ( sProperties ) "
说明：
用类似国际象棋棋盘的网格推拉效果转换对象内容。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.CheckerBoard(duration=5, direction='left'); }
Fade兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Fade ( enabled=bEnabled , duration=fDuration , overlap=fOverlap )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Fade ( sProperties ) "
说明：
用渐隐效果转换对象内容。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Fade(duration=2);}
GradientWipe兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.GradientWipe ( enabled=bEnabled , duration=fDuration , gradientSize=fGradientWidth , motion=sMotion )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.GradientWipe ( sProperties ) "
说明：
用滚动渐隐效果转换对象内容。
示例：
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.gradientWipe(duration=3, gradientsize=0.5);}
Inset兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Inset ( enabled=bEnabled , duration=fDuration )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Inset ( sProperties ) "
说明：
用对角扩张效果转换对象内容。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Inset();}
Iris兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Iris ( enabled=bEnabled , duration=fDuration , irisStyle=sShape , motion=sMotion )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Iris ( sProperties ) "
说明：
用特殊形状剪切轮廓扩张或收缩显示效果转换对象内容。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Iris(duration=3);}
Pixelate兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Pixelate ( enabled=bEnabled , duration=fDuration , maxSquare=iWidth )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Pixelate ( sProperties ) " 说明：
这个转换滤镜是一个复杂的视觉效果。在转换的前半段，对象内容先显示为矩形色块拼贴，然后矩形的宽度由一个像素增加至MaxSquare 属性所设置的值。每个矩形的颜色由其所覆盖区域的像素的颜色平均值决定。接下来的转换的后半段，矩形被还原为新内容具体的图像像素，显示出新的内容。
在使用此转换滤镜前设置此滤镜的Enabled 特性值为false 。这将预防在转换发生前彩色拼贴效果的静态滤镜先在对象内容上发生作用。
示例：
#idDiv{ height:250px; width:250px; background-color: gold;
filter:progid:DXImageTransform.Microsoft.Pixelate(duration=3, enabled='false');}
RadialWipe兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.RadialWipe ( enabled=bEnabled , duration=fDuration ,wipeStyle=sStyle )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.RadialWipe ( sProperties ) "
说明：
用放射状擦除效果转换对象内容。效果类似汽车挡风玻璃的刮雨刀。
示例：
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.RadialWipe(duration=3);}
RandomBars兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.RandomBars ( enabled=bEnabled , duration=fDuration , orientation=sOrientation )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.RandomBars ( sProperties ) "
说明：
用随机发生的线条转换对象内容。
示例：
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.RandomBars(duration=3);}
RandomDissolve兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.RandomDissolve ( enabled=bEnabled , duration=fDuration )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.RandomDissolve ( sProperties ) "
说明：
用随机像素溶解效果转换对象内容。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RandomDissolve();}
RevealTrans兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
CSS filter : RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.RevealTrans ( sProperties ) "
Scripting object.style.filter = "RevealTrans ( sProperties ) "
说明：
提供了24种转换对象内容的效果。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=2); }
Slide兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Slide ( enabled=bEnabled , duration=fDuration , bands=iBands , slideStyle=sslideStyle )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Slide ( sProperties ) "
说明：
用滑条抽离效果转换对象内容。
示例：
#idDiv{ filter:progid:DXImageTransform.Microsoft.Slide(bands=8, duration=7);}
Spiral兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Spiral ( enabled=bEnabled , duration=fDuration , gridSizeX=iColumns , gridSizeY=iColumns )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Spiral ( sProperties ) " 说明：
用矩形螺旋方式转换对象内容。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Spiral(duration=5, GridSizeX=25, GridSizeY=25); }
Stretch兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Stretch ( enabled=bEnabled , duration=fDuration , stretchStyle=sStretchStyle )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Stretch ( sProperties ) " 说明：
用拉伸(缩)变形效果转换对象内容。
示例：
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.Stretch(duration=3);}
Strips兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Strips ( enabled=bEnabled , duration=fDuration , motion=sMotion )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Strips ( sProperties ) " 说明：
用锯齿边覆盖效果转换对象内容。
示例：
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.Strips(duration=3);}
Wheel兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Wheel ( enabled=bEnabled , duration=fDuration , spokes=iSpokes )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Wheel ( sProperties ) " 说明：
用风车叶轮旋转效果转换对象内容。
示例：
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.Wheel(duration=3,spokes=8);}
Zigzag兼容性：IE5.5+
语法：
CSS filter : progid:DXImageTransform.Microsoft.Zigzag ( enabled=bEnabled , duration=fDuration , gridSizeX=iColumns , gridSizeY=iColumns )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Zigzag ( sProperties ) " 说明：
用类似擦地板的效果转换对象内容。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Zigzag(duration=5, GridSizeX=25, GridSizeY=25); }
addAmbient版本：DHTML Object Model返回值：无
语法：
Scripting object.filters.item('DXImageTransform.Microsoft.Light').addAmbient ( iRed , iGreen , iBlue , iStrength )
参数：
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为0 - 255 。
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为0 - 255 。
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为0 - 255 。
iStrength : 必选项。整数值(Integer)。指定光强度。取值范围为0 - 100 。
返回值：
无
说明：
为Light 滤镜添加环境光(Ambient Light )。环境光是无方向的，并且均匀的洒在页面的表面。环境光有颜色和强度值，可以为对象田家更多的颜色。它通常和其他光一起使用。
addCone版本：DHTML Object Model返回值：无
语法：
Scripting object.filters.item('DXImageTransform.Microsoft.Light').addCone ( iX1 , iY1 , iZ1 , iX2 , iY , iRed , iGreen , iBlue , iStrength , iSpread )
参数：
iX1 : 必选项。整数值(Integer)。指定光源的左坐标值。
iY1 : 必选项。整数值(Integer)。指定光源的上坐标值。
iZ1 : 必选项。整数值(Integer)。指定光源的Z坐标值。
iX2 : 必选项。整数值(Integer)。指定光焦点的左坐标值。
iY2 : 必选项。整数值(Integer)。指定光焦点的上坐标值。
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为0 - 255 。
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为0 - 255 。
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为0 - 255 。
iStrength : 必选项。整数值(Integer)。指定光强度。取值范围为0 - 100 。
iSpread : 必选项。整数值(Integer)。指定光源的虚拟位置与对象的表面之间的角度或张度。取值范围为0 - 90 。
返回值：
无
说明：
为Light 滤镜添加锥形光(Cone Light)以向对象的表面投射有方向的光束。光束会随延伸的距离而逐渐减弱。
addPoint版本：DHTML Object Model返回值：无
语法：
Scripting object.filters.item('DXImageTransform.Microsoft.Light').addPoint ( iX , iY , iZ , iRed , iGreen , iBlue , iStrength )
参数：
iX : 必选项。整数值(Integer)。指定光源的左坐标值。
iY : 必选项。整数值(Integer)。指定光源的上坐标值。
iZ : 必选项。整数值(Integer)。指定光源的Z坐标值。
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为0 - 255 。
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为0 - 255 。
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为0 - 255 。
iStrength : 必选项。整数值(Integer)。指定光强度。取值范围为0 - 100 。
返回值：
无
说明：
为Light 滤镜添加点光(Point Light)。
apply版本：DHTML Object Model返回值：无
语法：
Scripting object.filters.item('DXImageTransform.Microsoft.sFilterName').apply ()
参数：
无
返回值：
无
说明：
捕获对象内容的初始显示，为转换做必要的准备。无返回值。
当此方法一旦被调用后，对象属性的任何改变都不会被显示，直到你调用play 方法开始转换。
请注意：你只能使用visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。
当你调用play 方法时，转换呈现出内容的变化结果(对象的属性和子对象的visibility 属性的改变)。
changeColor版本：DHTML Object Model返回值：无
语法：
Scripting object.filters.item('DXImageTransform.Microsoft.Light').changeColor
( iLightNumber , iRed , iGreen , iBlue , fAbsolute )
参数：
iLightNumber : 必选项。整数值(Integer)。指定光的标识符。此数值依据光被添加的顺序编号。如第一个被添加的光的标识符就等于0 。
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为0 - 255 。
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为0 - 255 。
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为0 - 255 。
fAbsolute : 必选项。布尔值(Boolean)。指定改变是替换当前设置的绝对值，还是加到当前设置的相对值。此参数不等于零表示采用绝对值。否则表示采用相对值。
false : 指定改变是增加到当前设置的相对值。
true : 指定改变是替换当前设置的绝对值。
返回值：
无
说明：
改变Light 滤镜的光的颜色。
changeStrength版本：DHTML Object Model返回值：无
语法：
CSS 参考手册 CSS背景属性 属性描述值 background 简写属性，作用是将背景属性设置在一个声明中。background-color background-image background-repeat background-attachment background-position background-attachment 设置是否背景图像是固定的或随页面其余部分滚动。scroll fixed background-color 设置元素的背景颜色。color-rgb color-hex color-name transparent background-image 将图像设置为背景。url none background-position 设置背景图像的起始位置。top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeat 设置背景图像是否及如何重复。repeat repeat-x repeat-y no-repeat CSS 边框属性(border) 属性描述值 border 简写属性。作用是在一个声明中用来设置四个边框的所有属性。border-width border-style border-color border-bottom 简写属性。作用是在一个声明中用来设置底边框的所有属性。border-bottom-width border-style border-color border-bottom-color 设置底边框的颜色。border-color border-bottom-style 设置底边框的样式。border-style border-bottom-width 设置底边框的宽度。thin medium thick length border-color 设置四个边框的颜色，可以设置一到四个颜色。color
CSS style属性大全 显示: 标签属性/属性行为集合事件滤镜方法对象样式 一、标签属性属性描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为HTML 应用程序(HTA)，以便免除浏览器安全模式。ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间，包括3D 边框。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的frame 或iframe 的window 对象。 DA TAFLD dataFld 设置或获取由dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DA TASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 firstChild 获取对象的childNodes 集合的第一个子对象的引用。 FRAMEBORDER frameBorder 设置或获取是否显示框架的边框。 hasMedia 获取一个表明元素是否为HTML+TIME 媒体元素的Boolean 值。 HEIGHT height 设置或获取对象的高度。 HIDEFOCUS hideFocus 设置或获取表明对象是否显式标明焦点的值。 HSPACE hspace 设置或获取对象的水平边距。 ID id 获取标识对象的字符串。 innerText 设置或获取位于对象起始和结束标签内的文本。 isContentEditable 获取表明用户是否可编辑对象内容的值。 isDisabled 获取表明用户是否可与该对象交互的值。 isMultiLine 获取表明对象的内容是包含一行还是多行的值。 isTextEdit 获取是否可使用该对象创建一个TextRange 对象。 LANG lang 设置或获取要使用的语言。 LANGUAGE language 设置或获取当前脚本编写用的语言。
CSS 滤镜大全 css滤镜的标识符式“filter”，总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的则称为高级滤镜。 progID= program identifier （程序ID） DX=DirectX 在CSS样式中，提供了filter（滤镜效果），它可以对文字、图片、表格等确定范围的HTML标记设置滤镜效果。 旋转： style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)" 去背景色： style="filter:Chroma(Color=#000000)" 设置渐变色： style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolo rstr=#ffff00,gradientType=1)" 以下是图片转换滤镜： 随机变换：progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23) 方形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in) 方形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out) 交叉渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in) 交叉渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out) 菱形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in) 菱形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out) 圆形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out) 圆形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in) 加号渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
CSS扩展属性 “扩展”样式属性包括过滤器、分页和光标选项，它们中的大部分效果仅受 Internet Exp lorer 4.0 和更高版本的支持。 指定扩展属性：在“CSS 样式定义”对话框中，选择“扩展”（如下图），然后设置所需的样式属性。 （图片较大请放大后查看） 分页：在打印期间在样式所控制的对象之前或者之后强行分页。选择要在弹出式菜单中设置的选项。此选项不受任何 4.0 版本浏览器的支持，但可能受未来的浏览器的支持。 光标：位于“视觉效果”下的“光标”选项，是光标显示属性设置。当指针位于样式所控制的对象上时改变指针图像。选择弹出式菜单（下图）进行设置。它的详细列表和相关说明。
过滤器：又称 CSS滤镜，对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。DW MX 2004 扩展类过滤器嵌入16项样式属性（如下图），您可以根据您的需要从“过滤器”弹出式菜单中选择并加以设置。 （图片较大请放大后查看） 下图列出16项滤镜及说明，现在再进一步介绍一下：
“Alpha”滤镜：这个名字，在Flash和Photoshop经常见到。它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。 BlendTrans滤镜：它的功能也比较单一，就是产生一种精细的淡入淡出的效果。 Blur滤镜：把它加载到文字上，产生风吹模糊的效果，类似立体字，这将为你在网页上制作立体字标题带来了方便。也可以把Blur滤镜加载到图片上，能达到用图象处理软件制作的效果。 “DropShadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面，然后在页面上显示出该对象的投影。 CSS的无参数滤镜共有六个（FlipH、FlipV、Invert、Xray、Gray和Light），虽然它们没有参数，相对来讲，灵活性要差点，但它们用起来更方便，效果也相当明显。用它们可以使文字或图片翻转、获得图片的“底片”效果，甚至可以制作图片的“X光片”效果。 glow滤镜：使对象的边缘就产生类似发光的效果，glow”滤镜制作这种效果操作非常简便。 Mask滤镜：可以为网页上的元件对象作出一个矩形遮罩效果。 wave滤镜：它的作用是把对象按照垂直的波形样式扭曲的特殊效果。 Light滤镜：能产生一个模拟光源的效果，配合使用一些简单的Javascrpt，使对象产生奇特光照的效果。 RevealTrans动态滤镜：是一个神奇的滤镜，它能产生23种动态效果，还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，非常方便。
DW中的css滤镜 一、哪些标识能被CSS滤镜应用？ Body（网页主体）Button（HTML按钮）Div（一区块）Img（图像）Imput（表单输入元件）Marquee（滚动文本）Span（与上下文位于同一段落的独立行内元件）Table（整个表格）TD（单元格）Textarea（多行文字输入框）Tfoot（当作注脚的表格行）TH（表头）Thead（表格的表头行）TR（表格的一行） 二、各种滤镜效果 alpha是用来设置透明度的 Mask属性为对象建立一个覆盖于表面的膜 blur属性假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果 Chroma属性可以设置一个对象中指定的颜色为透明色 DropShadow属性是为了添加对象的阴影效果的 FlipH、FlipV属性 Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转 Glow属性当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果 Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值 Shadow属性可以在指定的方向建立物体的投影 Wave属性用来把对象按照垂直的波纹样式打乱。 Xray属性这种属性产生的效果就是使对象看上去有一种X光片的感觉 滤镜说明： Alpha：设置透明层次. blur：创建高速度移动效果，即模糊效果. Chroma：制作专用颜色透明. DropShadow：创建对象的固定影子. FlipH：创建水平镜像图片. FlipV：创建垂直镜像图片. glow：加光辉在附近对象的边外. gray：把图片灰度化. invert：反色. light：创建光源在对象上. mask：创建透明掩膜在对象上. shadow：创建偏移固定影子. wave：波纹效果. Xray：使对象变的像被x光照射一样. 三、滤镜参数设置
第18讲使用CSS美化网页二 1.1教学目标： ◆知识目标 1.掌握一些CSS样式表的基本滤镜效果。 2.理解Dreamweaver CS6新增加的Spry组件功能。 ◆技能目标 1.能使用CSS样式表定义链接的各种状态 2.运用重定义HTML标签来统一页面元素格式 ◆品质目标 培养学生认真细致、踏实进取的精神 1.2教学重点： 1.掌握一些CSS样式表的基本滤镜效果。 2.掌握Dreamweaver CS6新增加的Spry组件功能。 1.3 教学难点 制作CSS样式表的基本滤镜效果 1.4教学方法：讲练结合，任务驱动、分子任务操练 1.5课时安排：2课时 1.6教学对象分析： 这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。 1.7教学过程： 一、CSS滤镜 在许多图像编辑软件中都有制作特效的滤镜功能，例如Photoshop和Fireworks，滤镜神奇的功能常常使我们赞叹不绝。在Dreamweaver中也有这样的功能，我们可以在CSS样式表中使用特定的语法来制作特效。 一般来说，制作文字特效往往使用专业的图像编辑软件，但是图像下载的时间较长，严重影响了页面的下载速度。通过CSS样式表可以解决这个问题，CSS样式表的定义仅需要三至四行源代码，大大加快了页面下载的速度，同时又增加了页面的视觉效果。但是，应用样式表也同时带来了许多问题，例如浏览器对样式表的兼容性，同时较复杂的样式表中要用到层，这对其他不支持样式表和层的浏览器来说，无疑是一种限制。下面我们介绍利用CSS滤镜制作阴影字。 在“CSS样式”面板中单击“新建CSS样式”按钮，打开“新建CSS样式”对话框。在“名称”文本框中输入样式表的名称，例如.shadow，在选择器类型选项中选择“类”，在“定义在”选项中选择“仅对该文档”，如图3-64所示。 单击“确定”按钮，则弹出“CSS样式定义”对话框。在“字体”下拉列表中选择字体，例如Arial…，选择“颜色”为#FFCC33。
CSS 背景属性 属性 描述 值 IE F N W3C background 简写属性，作用是将 背景属性设置在一 个声明中。 ? background-color ? background-image ? background-repeat ? background-attach ment ? background-positi on 4 1 6 1 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 ? scroll ? fixed 4 1 6 1 background-color 设置元素的背景颜色。 ? color-rgb ? color-hex ? color-name ? transparent 4 1 4 1 background-image 把图像设置为背景。 ? url ? none 4 1 4 1 background-position 设置背景图像的起始位置。 ? top left ? top center ? top right ? center left ? center center ? center right ? bottom left ? bottom center ? bottom right ? x-% y-% ? x-pos y-pos 4 1 6 1 background-repeat 设置背景图像是否及如何重复。 ? repeat ? repeat-x ? repeat-y ? no-repeat 4 1 4 1
border 简写属性。作用是在一个声明中用来设置四个边框的所有属性。 ? border-width ? border-style ? border-color 4 1 4 1 border-bottom 简写属性。作用是在一个声明中用来设置下边框的所有属性。 ? border-bottom-w idth ? border-style ? border-color 4 1 6 1 border-bottom-color 设置下边框的颜 色。 border-color 4 1 6 2 border-bottom-style 设置下边框的样 式。 border-style 4 1 6 2 border-bottom-width 设置下边框的宽 度。 ? thin ? medium ? thick ? length 4 1 4 1 border-color 设置四个边框的颜色，可以设置一到四个颜色。 color 4 1 6 1 border-left 简写属性。用于在一个声明中设置左边框的所有属性。 ? border-left-wid th ? border-style ? border-color 4 1 6 1 border-left-color 设置左边框的颜 色。 border-color 4 1 6 2 border-left-style 设置左边框的样 式。 border-style 4 1 6 2 border-left-width 设置左边框的宽 度。 ? thin ? medium ? thick ? length 4 1 4 1 border-right 简写属性。将所有用于右边框的属性设置于一个声明中。 ? border-right-wi dth ? border-style ? border-color 4 1 6 1 border-right-color 设置右边框的颜 色 border-color 4 1 6 2
实验一网页的认识 实验目的 1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件； 2、利用记事本来编辑HTML文档并浏览； 3、熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统，内部组成局域网，外连Internet互联网。 实验重点及难点 ◆熟悉HTML的结构、语法。 ◆熟悉HTML基本标记的使用。 实验内容 1、从网上（如网页制作大宝库https://www.doczj.com/doc/755885013.html,等）下载网页制作时需要的小图片、 动画及flash等网页制作素材。 2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析 网页。 3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设 为主页。 4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”， 内容为司空曙的《江村即事》，如下图所示。 5、通过附录1的练习熟悉HTML基本标记的使用。（可参考第二章内容）
实验二 Dreamweaver基本操作（一） 实验目的 1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理； 2、熟悉网页文件的基本操作； 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验环境 WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。实验重点及难点 ◆文字的插入及设置。 ◆图像的插入及设置。 ◆各种超链接的创建。 实验内容 1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几 个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。 2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网 页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。 3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为 sy2-2.html，效果如图所示。 ●标题文字大小用
标记； ●作者信息文字大小为24像素，字体为幼圆，颜色为红色； ●古诗文字大小为24像素，字体为隶书，颜色为蓝色； ●在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20 个像素，颜色为棕色；一、CSS背景属性（Background） background简写属性在一个声明中设置所有的背景属性。 {backgroud:background-color;background-image;background-repeat ;background-attachment;background-position;} ?background-color:redrgb(255,255,255)#000000设置背景颜色 ?background-image：url(bgimage.gif);（值为图片的路径）设置背景图像 ?background-repeat：设置图像的排列 repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承background-repeat 属性的设置。 ?background-attachment：设置背 ?图像是否固定或者随着页面的其余部分滚动。 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承background-attachme nt属性的设置。 ?background-position：topleft;x%y%;5px50px设置背景图像的起始位置。 ? ?景 二、CSS边框属性（Border和Outline） border：简写属性在一个声明设置所有的边框属性{border:border-width;border-color;border-style;} border-width:设置边框宽度 *thin定义细的边框 *medium 默认。定义中等的边框。 *thick 定义粗的边框。 *length允许您自定义边框的宽度。(15px) *inherit 规定应该从父元素继承边框宽度。 border-color:设置边框颜色 *color_name规定颜色值为颜色名称的边框颜色（比如red）。*hex_number 规定颜色值为十六进制值的边框颜色（比如#ff00 00）。 *rgb_number 规定颜色值为rgb代码的边框颜色（比如rgb(25 5,0,0)）。 *transparent 默认值。边框颜色为透明。 *inherit 规定应该从父元素继承边框颜色。 border-style:设置边框样式 *none 定义无边框。 *hidden 与"none"相同。不过应用于表时除外，对于表，hidd en用于解决边框冲突。 *dotted 定义点状边框。在大多数浏览器中呈现为实线。 *dashed 定义虚线。在大多数浏览器中呈现为实线。 *solid 定义实线。 *double 定义双线。双线的宽度等于border-width的值。 *groove 定义3D凹槽边框。其效果取决于border-color的值。*ridge 定义3D垄状边框。其效果取决于border-color的值。*inset 定义3Dinset边框。其效果取决于border-color的 值。 *outset 定义3Doutset边框。其效果取决于border-color的 值。 *inherit 规定应该从父元素继承边框样式。 --------border-bottom简写属性把下边框的所有属性设置到一个声明中. --------border-top/right/bottom/left {border-bottom:border-bottom-width;border-bottom-style; border-bottom-color;} -------border-style/width/color: outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 注释：轮廓线不会占据空间，也不一定是矩形。 {outline:outline-color;outline-style;outline-width;}三、CSS文本属性（Text） color：设置文本颜色 direction：设置文本的方向/书写方向 *ltr 默认。文本方向从左到右。 *rtl 文本方向从右到左。 *inherit 规定应该从父元素继承direction属性的值。 letter-spacing：设置字符间距 *normal 默认。规定字符间没有额外的空间。
CSS 背景属性（Background） 属性描述CSS background在一个声明中设置所有的背景属性。 1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color设置元素的背景颜色。 1 background-image设置元素的背景图像。 1 background-position设置背景图像的开始位置。 1 background-repeat设置是否及如何重复背景图像。 1 CSS 边框属性（Border 和Outline） 属性描述CSS border在一个声明中设置所有的边框属性。 1 border-bottom在一个声明中设置所有的下边框属性。 1 border-bottom-color设置下边框的颜色。 2 border-bottom-style设置下边框的样式。 2 border-bottom-width设置下边框的宽度。 1 border-color设置四条边框的颜色。 1 border-left在一个声明中设置所有的左边框属性。 1 border-left-color设置左边框的颜色。 2 border-left-style设置左边框的样式。 2 border-left-width设置左边框的宽度。 1 border-right在一个声明中设置所有的右边框属性。 1 border-right-color设置右边框的颜色。 2 border-right-style设置右边框的样式。 2 border-right-width设置右边框的宽度。 1 border-style设置四条边框的样式。 1 border-top在一个声明中设置所有的上边框属性。 1 border-top-color设置上边框的颜色。 2 border-top-style设置上边框的样式。 2 border-top-width设置上边框的宽度。 1 border-width设置四条边框的宽度。 1 outline在一个声明中设置所有的轮廓属性。 2 outline-color设置轮廓的颜色。 2 outline-style设置轮廓的样式。 2 outline-width设置轮廓的宽度。 2 CSS 文本属性（Text） 属性描述CSS color设置文本的颜色。 1 direction规定文本的方向/ 书写方向。 2 letter-spacing设置字符间距。 1 line-height设置行高。 1 text-align规定文本的水平对齐方式。 1
1.下列哪个不是CSS的优势？（___D ____）。 （A）符合WEB标准 （B）提高页面浏览速度 （C）有很好的兼容性 （D）可以编辑图像 2.Dreamweaver中CSS滤镜特效属于CSS样式定义分类中的（__D_____）。 （A）定位 （B）类型 （C）边框 （D）扩展 3.关于CSS的用法，以下说法哪个是错误的？（___B ____） （A）直接在DreamweaverCS5网页文件中创建CSS规则，这种方式是内部CSS样式表。（B）外部CSS样式表文件一次只能控制一个网页的格式。 （C）在