清华大学版（2012） 八年级下册信息技术 课件 - 3.11最佳搭档——应用CSS样式与层美化网页 (共20张PPT)

最佳搭档——应用CSS样式与层美化网页 1 任务导航 目前，在Web设计和开发技术领域，CSS和DIV是非常流行的新技术，堪称最佳搭档，快捷控制网页样式和精确布局离不开它们的完美配合。Dreamweaver提供了功能强大的CSS样式表编辑工具，对于设计者来说，它是个非常灵活的工具，可以用来一次对若干个文档所有的样式进行处理，成倍地提高工作效率。 本课，我们将学习CSS的基本知识，并且初步运用CSS样式表和AP Div层加工处理“校园内外”栏目的页面，完成效果如图所示。 2 1.通过“属性检查器”快速创建CSS样式 步骤1：选中“校园内外”页面的文本。 步骤2：在“属性检查器”中单击“大小”选项中的16，弹出“新建CSS规则”对话框，将此对话框设置如图所示。 3 这表示我们要对本页面中所有段落标签进行CSS规则的定义。此时，单击“拆分”视图按钮，可以看到在<head>标签中增加了一段代码，如图所示，这就是这个CSS规则设置后生成的代码。 4 步骤3：取消对文本的选择，单击文本，使插入点在文本中闪烁，然后继续在“属性检查器”中更改文本的颜色、字体、加粗、对齐方式等属性如图所示。 5 此时对应的CSS代码如左图所示，页面在IE中浏览效果如右图所示。 6 2.通过“CSS样式”面板创建和编辑样式表 步骤1：选择“窗口”菜单，确保“CSS样式”命令被勾选上，展开“CSS样式”面板。 步骤2：单击如图所示的P标签，它的规则包含的属性将会显示在面板中，可以看出，这些属性和代码是完全对应的。 7 步骤3：单击“CSS样式”面板底部的图标，弹出“p的CSS规则定义”对话框，我们要在这里继续样式表的修改，将Line-height参数设置为30px，表示设置行高为30px，如图所示。 8 步骤4：单击“CSS样式”面板底部的图标，新建样式表。在弹出的“新建CSS规则”对话框中如图设置，在“为CSS规则选择上下文选择器类型”中选择“类（可应用于任何HTML元素）”选项，在“选择或输入选择器名称”文本框中输入自定义样式表名称ys0l，在“选择定义规则的位置”中选择“仅限该文档”选项。 9 步骤5：单击“确定”按钮，弹出“.ys0l的CSS规则定义”对话框，在“分类”列表中选择“区块”选项，设置“