《中文DreamWeaverMX 网页制作教程》课件第12章.pptVIP

(3)选中整段文字，在“属性”面板中“样式”的下拉菜单中选择“border”，即对选中文字应用border样式。注意，应用样式后，最终效果在设计视图中无法预览，只能通过网页形式预览。12.3.4应用实例4——图片模糊效果

利用CSS样式，不仅可以方便地控制文字样式，还可以给图片加上个性的效果，从而打造出更富于变化的网页。本节以图12-15所示的网页(见本书配套电子文档中的chap/chap12-4.htm文件)为例，讲解利用CSS样式为图片加上模糊效果的详细步骤。

图12-15图片模糊效果(1)新建页面，设置页面标题，插入图片“6-1.jpg”。

(2)在“CSS样式”面板中单击面板下方的 按钮新建一个CSS样式“t1”，单击“确定”按钮后，在弹出的“CSS样式定义”对话框中选择“扩展”分类，然后在“过滤器”下拉菜单中选择“Alpha”滤镜样式，修改“过滤器”中显示的Alpha滤镜参数为Alpha(Opacity=100,FinishOpacity=0,Style=2)。设置完毕后，单击“确定”按钮。“Alpha”属性就是把一个目标元素与背景相混合，设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。它们的参数含义分别如下：

“Opacity”代表透明度水准，默认的范围是从0到100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。“FinishOpacity”是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度，范围也是0到100。“Style”参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。“STARTX”和“STARTY”代表渐变透明效果开始时X和Y的坐标。“FINISHX”和“FINISHY”代表渐变透明效果结束时X和Y的坐标。(3)在设计视图中，选中图片“6-1.jpg”，在“属性”面板中“类”下拉列表中选择“t1”(见图12-16)，再按下F12键预览，模糊效果就出现了。如需对文字、表格等对象应用Alpha滤镜样式，可在选中对象后在“属性”面板中“样式”一栏选择应用。注意，应用样式后，最终效果在设计视图中无法预览，只能通过网页形式预览。

图12-16对图片应用样式

结合表格、表单等学过的知识，制作如图12-17所示的“梦衣裳”购物网站首页(本书配套电子文档中的root/index.htm文件，请将显示器分辨率调至1280×1024，分辨率为1024×768的显示器可参考index1024.htm文件)，并对其中的文字、图片进行相关的CSS样式应用，最后，将前面几章所做的练习分别链接到“梦衣裳”购物网站首页所对应的菜单。12.4综合练习图12-17“梦衣裳”购物网站首页*第12章使用CSS美化页面12.1CSS简介12.2创建和编辑CSS样式12.3CSS样式应用实例12.4综合练习

CSS(CascadingStyleSheets)即层叠样式表，有了它，我们可以在文字编排与版面设计上随心所欲，设计出更有变化性的网页。12.1CSS简介细心的学习者可能留意过，我们在设置字体大小等属性时，“属性”面板中“样式”一栏可以将曾经设置过的字体大小、颜色等属性样式保存在其下拉列表中。而CSS样式表中的一个功能就是把网页上的内容结构和格式控制相分离，即先输入内容，再选择样式，使得网页可以只由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。

在排版方面，使用CSS也非常方便，还可以制作出一些丰富多彩的特效，如图片模糊效果(见图12-1)等。

图12-1利用CSS打造的图片模糊效果

在创建CSS样式前，我们有必要先了解“CSS样式”面板。在菜单栏中选择“窗口”→“CSS样式”或按下Shift+F11快捷键，即可打开如图12-2所示的“CSS样式”面板，在面板中可以看到网页中所有CSS样式的名称和属性。12.2创建和编辑CSS样式

图12-2未定义样式的“CSS样式”面板在“CSS样式”面板中创建CSS样式的方法有：

方法一：在“CSS样式”面板中单击鼠标右键，在弹出的快捷菜单中选择“新建”

命令。

方法二：单击面板右上角的 按钮，在其下拉菜单中选择“新建”命令。

方法三：直接单击“CSS样式”面板下方的 按钮。通过以上三种方法可打开如图12-3所示的“新建CSS样式”对话框