Dreamweaver网页制作课件 第12章 CSS样式的应用.pptVIP

要创建一个漂亮的网页，掌握设置CSS样式是必不可少的，CSS样式可以实现网页中几乎所有的样式效果。 创建CSS样式 设置CSS样式 管理CSS样式 任务一 创建CSS样式 Dreamweaver 8提供的样式表编辑功能可以让用户轻松地进行复杂的样式设置，创建出适用的样式表。 阶段1 执行菜单命令创建样式表 （1）选择“窗口→CSS样式”命令，打开“CSS样式”面板，然后选择“文本→CSS样式→新建”命令。 （2）在打开的对话框的“选择器类型”中选择“类”单选按钮，在“名称”文本框中输入自定义样式表名称。 （3）在“定义在”选项中，可以选择新建样式表的作用类型，是独立的“新建样式表文件”，还是只对当前网页效果设置有作用的“仅对该文档”，然后单击“确定”按钮。 （4）在打开的“.style1的CSS规则定义”对话框中进行各选项的设置后，单击“确定”按钮。 （5）在“CSS样式”面板中可以看到新创建好的样式表。 阶段2 使用CSS面板创建样式表 （1）选择“窗口→CSS样式”命令，打开“CSS样式”面板，然后单击“新建CSS规则”按钮 。 （2）在打开的对话框的“选择器类型”中选择“类”单选按钮，在“名称”文本框中输入自定义样式表名称。 （3）在“定义在”选项中，可以选择新建样式表的作用类型，是独立的“新建样式表文件”，还是只对当前网页效果设置有作用的“仅对该文档”，然后单击“确定”按钮。 （4）在打开的“.style1的CSS规则定义”对话框中进行各选项的设置后，单击“确定”按钮。 （5）在“CSS样式”面板中可以看到新创建好的样式表。 任务二 设置CSS样式 只有对CSS样式的详细设置进行全面地认识，然后掌握利用CSS样式表在网页中进行各种效果设置的具体方法，才能很好地使用CSS样式来美化网页。下面介绍详细设置CSS样式的方法。 阶段1 设置类型 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框。 （3）选择需要的选项进行设置，例如在“字体”中选择“宋体”，字体大小为12像素，行高为1.5倍行高，修饰为“无”，颜色为“#666666”。 （4）单击“确定”按钮，即可完成“类型”的设置。 阶段2 设置背景 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“背景”选项。 （3）选择需要的选项进行设置，这里在背景颜色框中设置颜色为“#CCCCCC”。 （4）单击“确定”按钮，即可完成“背景”样式的设置。 阶段2 设置背景 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“背景”选项。 （3）选择需要的选项进行设置，这里在背景颜色框中设置颜色为“#CCCCCC”。 阶段3 设置区块 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“区块”选项。 （3）选择需要的选项进行设置后，单击“确定”按钮，完成“区块”的设置。 阶段4 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“方框”选项。 （3）选择需要的选项进行设置后，单击“确定”按钮，即可完成“方框”的设置。 阶段5 设置边框 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“边框”选项。 （3）选择需要的选项进行设置后，单击“确定”按钮，完成“边框”样式的设置。 阶段6 设置列表 （1）选择“文本→CSS命令→新建”命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。 （2）设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框，在“分类”列表中选择“列表”选