中文版 Dreamweaver CS6网页设计教程 第5章

1、第,5,章,CSS,样式,本章主要内容,CSS,概述,创建和使用,CSS,样式,设置,CSS,样式参数,本章重点,如何使用,CSS,样式,如何设置,CSS,样式的参数,2,5.1 CSS,样式概述,CSS(Cascading Style Sheet,即层叠样式表，在现在的网页中,应用相当广泛。使用,CSS,样式可以设置页面元素的相关属性,例如字体和表格等页面元素的大小、颜色、边框等,CSS,样式表可以同时控制多个文档的内容格式，并且当,CSS,样,式表更新或修改时，所有应用此,CSS,样式表的页面都将自动更,新,Dreamweaver CS6,提供了强大的,CSS,编辑和管理功能，在文档,中可

2、以很轻松地创建并使用,CSS,样式表,在,Dreamweaver CS6,中可以定义以下三种,CSS,样式,自定义,CSS,样式：将自定义的,CSS,样式应用到任何范围或任何文本段中,HTML,标签样式：重新定义标签的格式，当创建或修改标签的,CSS,样式时,所有以该标签格式化的文本都将更新,CSS,选择器样式：重新定义标签的特定格式或包含某指定属性的所有标,签的格式,3,5.1 CSS,样式概述,按照定义,CSS,样式的方式,可将,CSS,样式在页面中的使,用方式分为以下三种,1,局部套用,CSS,样式,2,在页面开头定义,3,链接外部样式表,4,5.2 CSS,样式的简单操作,CSS,在定

3、义页面元素,格式方面有着非同小可,的作用，下面介绍如何,创建和使用强大的,CSS,样式,5,5.2.1,认识,CSS,样式”面板,CSS,样式”面板提供了编辑和应用,CSS,样式,的工作环境。依次选择菜单中的“窗口,“CSS,样式”命令，或单击“设计”面板上的小三角,形，将“设计”面板打开，该面板上的第一项,就是,CSS,样式”面板，如图,5-1,所示,CSS,样式”面板的底部有五个功能按钮，如,图,5-2,所示,6,5.2.2,创建,CSS,样式,创建新的,CSS,样式的操作步骤如下,1,在,CSS,样式”面板中单击按钮,或者右击该面板，在弹出的快捷菜单中,选择“新建”命令，打开“新建,CS

4、S,规,则”对话框，如图,5-4,所示,2,在“新建,CSS,规则”对话框中进,行设置,3,如果是创建外部样式表，则单击,确定”按钮后弹出如图,5-5,所示的对话,框，将所新建样式表进行保存即可,4,打开,CSS,规则定义”对话框,设置相关参数，即生成,CSS,样式文件,7,5.2.3,附加外部,CSS,样式表,附加外部,CSS,样式表的操作步骤如下,1,打开,CSS,样式面板,2,用右键单击,CSS,样式面板，在弹出的快捷菜单中选择,附加样式表”命令，打开“链接外部样式表”对话框，如图,5-6,所示,3,在对话框中的“文件,URL,下拉列表框中输入所需的文,件，或者单击其右侧的“浏览”按钮，

5、在弹出的对话框中查找,并选择所要附加的文件,4,在“添加为”选项组中选择“链接”或“导入”选项,指定和创建用于将外部,CSS,样式表附加到文档中的标签方式,链接,导入,5,设置完成后，单击“确定”按钮，即可将所选择的,CSS,样式表附加到当前文档，在,CSS,样式面板中显示该,CSS,样,式表,8,5.3,设置,CSS,样式参数,打开,CSS,规则定,义”对话框，在该对,话框的“分类”列表,中选择不同的类型,对,CSS,设置不同的参,9,5.3.1,设置“类型”参数,在,CSS,规则定义”对话框的“分类”列表框,中选择“类型”选项，设置选定的,CSS,样式的,类型参数，如图,5-7,所示,10

6、,5.3.1,设置“类型”参数,在“类型”界面中可,以对下列参数进行设置,1,字体属性,2,文本属性,11,5.3.2,设置“背景”参数,在“分类”列表框中选择“背景”选项，设置,选定的,CSS,样式的“背景”参数，如图,5-8,所示,在“背景”界面中可以对下列参数进行设置,1,背景色,2,背景图像,12,5.3.3,设置“区块”参数,在“分类”列表框中选择“区块”选项，设置,CSS,样式的区块参数，如图,5-9,所示,在“区块”界面中可以对下列参数进行设置,1,间距,2,对齐,3,文本缩进,4,空格,5,显示,13,5.3.4,设置“方框”参数,在“分类”列表框中选择“方框”选项，设置,CS

7、S,样式的方框参数，如图,5-10,所示,在“方框”界面中可以对下列参数进行设置,1,高度和宽度,2,浮动位置,3,边界,4,空白,14,5.3.5,设置“边框”参数,在“分类”列表框中选择“边框”选项，设置,选定的,CSS,样式的边框参数，如图,5-11,所示,在“边框”界面中可以对下列参数进行设置,1,边框风格,2,边框宽度,3,边框颜色,15,边学边练,5-1,美化表格,借助,CSS,样式表的强大功能，可以创建精美的,表格效果，这里介绍点线框表格的制作方法,具体操作步骤如下,1,插入,3,行,3,列的表格,2,新建,CSS,样式，在“新建,CSS,规则”对话框中,进行设置，如图,5-12

8、,所示。在“选择器类型”下拉列,表框中选择“标签,重新定义,HTML,元素,在“选择,器名称”下拉列表框中选择,table,选项，在“规则定义,下拉列表框中选择,仅限该文档,选项,16,边学边练,5-1,美化表格,3,打开,table,的,CSS,规则定义”对话框，选,择“边框”选项，在该选项界面中作如下设置：在,Style,样式,选项组中选中“全部相同”复选框，然后,在,Top,上,下拉列表框中选择,dotted,点线,选项。分别,在,Width,宽度,选项组中输入值,1,0,0,1,单位,像素。在,Color,颜色,选项组中选择“全部相同”复选,框，并设置边框颜色为,FF0000,如图,5

9、-13,所示,4,新建一个,CSS,标签样式，按如图,5-14,所示,进行设置,5,使用和步骤,3,相同的方法定义新建的,CSS,样式，所不同的是边框宽度值分别是,0,1,1,0,如图,5-15,所示,6,至此，虚线框表格制作成功，按,F12,键预览,如图,5-16,所示,17,5.3.6,设置“列表”参数,在“分类”列表框中选择“列表”选项，设置,选定的,CSS,样式的列表参数，如图,5-17,所示,在“列表”界面中可以对下列参数进行设置,1,类型,2,项目符号图像,3,换行位置,18,5.3.7,设置“定位”参数,在“分类”列表框中选择“定位”选项，设置,选定的,CSS,样式的定位参数，如

10、图,5-18,所示,在“定位,界面中可以对下列参数进行设置,1,层的放置方式,2,层的大小,3,层的可见性,4,层的重叠顺序,5,显示溢出内容,6,层的位置,7,显示局部区域,19,5.3.8,设置“扩展”参数,在“分类”列表框中选择“扩展”选项，设置,选定的,CSS,样式的扩展参数，如图,5-19,所示,在“扩展”界面中对下列参数进行设置,1,分页,2,视觉效果,20,边学边练,5-2,改变鼠标形状,使用,Dreamweaver CS6,的,CSS,样,式可以变换页面中的鼠标效果。其,操作步骤如下,1,创建基本页面,2,单击,CSS,样式”面板上的,新建,CSS,样式”按钮,打开“新建,CS

11、S,规则”对话框，在该对话框中进行,如下设置：在“选择器类型”下拉列表,框中选择“类,可应用于任何,HTML,元,素,在“选择器名称”下拉列表框中,输入新建,CSS,样式的名称,cursor,在“规则定义”下拉列表框中选择,仅,限该文档,完成后单击“确定”按钮,如图,5-20,所示,3,打开,cursor,的,CSS,规则定义,对话框，在“分类”列表框中选择“扩,展”选项，在,Cursor,光标,下拉列表中,选择鼠标方案，如图,5-21,所示,21,边学边练,5-2,改变鼠标形状,4,选择一种鼠标方案后，单击“确定,按钮或“应用”按钮，将新建的,CSS,样,式应用在页面中,5,按,F12,键就

12、可以看到与众不同的鼠,标效果了，图,5-22,所示为,help,鼠标方案,22,5.4,滤,镜,应,用,1. CSS,滤镜简介,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,Alpha,BlendTrans,Blur,Chroma,DropShadow,FlipH,FlipV,Glow,Gray,Invert,Light,Mask,RevealTrans,设置页面切换时的过渡效果,Shadow,Wave,Xray,2,使用,DropShadow,滤镜,3,使用,Blur,滤镜,23,5.5,导入,Word,文件,导入,Word,文件的具体操作步骤如下,1,单击,Word,绘图工具栏上的按钮在,Word,文档中插入艺术,字，如图,5-31,所示。编辑好后将其保存为,Word,文档的格式,2,在,Dreamweaver CS6,中依次选择“文件,导,入,“Word,文档”命令，在打开的对话框中选择已创建的,Word,文档，然后单击“打开”按钮，结果如图,5.32,所示,3,依次选择“命令,清理,Word,生成的,HTML,命令，打,开“清理,Word,生成的,HTML,对话框，在该对话框中设置相关参,数可以清除,Word Web,页面中的冗余代码，如图,5-33,所示