《网页设计与制作》第四章：页面设计51698.pptVIP

* 使用内置的CSS样式 Dreamweaver MX2004提供了方便的CSS属性操作和应用功能的同时，还提供了大量现成的CSS应用模板，可以在制作网页时直接使用。 * CSS网页 文件——新建——页面设计CSS * CSS文件模板 文件——新建——CSS样式表 * 设置CSS属性 使用样式属性对话框 通过管理或新建样式 使用面板组 执行窗口——CSS样式 使用窗口——标签检查器——CSS属性面板 CSS属性面板可以设置样式面板中的8类属性。 * CSS属性 类型 1.字体（font-family） 2.大小（font-size） 3.粗细（font-weight） 4.样式（font-style） 5.变量 6.行高（line-height） 7.大小写（text-transform） 8. 颜色（color） 9. 修饰（text-decoration） * 背景 1.背景颜色（background-color） 2.背景图像（background-image） 3.重复（background-repeat） 4.附件（background-attachment） 5.背景图片位置（background-position） * 区块 1.字母间距（letter-spacing） 2. 字词间距（word-spacing） 3.垂直对齐（vertical-align） 4.文本对齐（text-align ） 5. 文本缩进（text-indent ） 6.空格（white-space） 7.显示（display） * 方框 1.宽（width）和高（height） 2.漂浮（float）和清除（clear） 3.填充（padding） 4.边界（margin） * 边框 1.样式（border-style） 2.宽度（border-width） 3.边框颜色（border-color） 列表 1.类型（list-style-type ） 2.项目符号图像（list-style-image） 3.位置（list-style-position） * 定位 定位属性包括类型、溢出、Z轴、宽、高、位置、剪辑的等，其作用和前面介绍的层的定义相同。事实上，在对层的属性进行定义时，就是在层代码行中加入了CSS代码。 * 实例3：采用绝对定位，指定元素blockDiv距离窗口左边180px，顶部50px DIV ID=“blockDiv” Style=“position:absolute;left:180” top:50;width:200;visbility:hidden;” FONT Color＝red花生/FONT/DIV * 扩展 1.分页（break） 2.光标 * CSS滤镜 1、Alpha 滤镜 2. BlendTrans滤镜 3.Blur 滤镜 Alpha滤镜是把一个目标元素与背景混合，可以指定数值来控制混合的程度，通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。 BlendTrans滤镜产生一种淡入淡出的效果。 Blur滤镜产生模糊效果。 * 4.Chroma 滤镜 5. DropShadow 滤镜 Chroma属性可以在一个对象中指定一种颜色为透明色。 DropShaow是设置对象的阴影效果。 6.FlipH和FlipV 滤镜 FlipH和FlipV 滤镜分别是水平反转和垂直反转，这两个滤镜没有参数。 7.Glow 滤镜 当对一个对象使用glow属性后，这个对象的边缘就会产生类似发光的效果。 * 8.Gray ,Invert,Xray 滤镜 Gray滤镜是把一张图片变成灰度图 9.Light? 滤镜 这个属性模拟光源的投射效果。 10.Mask 滤镜 使用Mask 滤镜可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。 * 12. Shadow 滤镜 11. RevealTrans滤镜 RevealTrans滤镜能产生23种动态效果，可在其中随机抽用其中的一种。 利用Shadow属性可以在指定的方向建立物体的投影。 13.Wave 滤镜 Wave?属性把对象在垂直的方向按波纹样式打乱。 * 应用举例——用CSS样式设置文本格式 将利用CSS样式为Triangel网页进行文本格式设置。 * 用CSS样式设置文本格式效果 * 设置框架属性 “框架名称”文本框 “源文件”文本框 “滚动”下拉列表框 复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “