第14讲Dreamweaver简述.ppt

图14-13 新建CSS样式(1) (3) 在“新建CSS 样式”对话框中，对于“类型”选项，选择“重定义HTML标签”。 (4) 在“标签”的弹出式菜单中选择“body”。 (5) 在“定义在”选项中选择“仅对该文档”，则从现在起，我们将对此文档应用该样式。稍后会看到如何导出该样式，以便在站点的其他页面中使用它。您的对话框应如图14-14所示。 (6) 单击“确定”按钮，“CSS样式定义”对话框随即出现，如图14-15所示。 图14-14 新建CSS样式(2) 图14-15 CSS样式定义对话框 (7) 进行下列“类型”设置：在“字体”弹出式菜单中选择“Arial, Helvetica, sans serif”；在“大小”弹出式菜单中选择“12”和“像素”；在“颜色”框中单击颜色选择器，然后使用滴管选择白色。 (8) 在“分类”列表框中选择“背景”，列表框中CSS背景属性随即出现，如图14-16所示。 图14-16 CSS背景属性对话框 (9) 在“背景颜色”列表栏中执行下列操作之一以便设置背景颜色： ● 单击颜色选择器，然后使用滴管选择深蓝色；或者将滴管移到“文档”窗口中，然后在“全局”徽标图像中选择蓝色。 ● 在“背景颜色”文本框中输入#333366。 (10) 单击“确定”按钮完成背景设置。 14.3.2 导出CSS样式 到目前为止，我们所创建的CSS样式仅应用于本文档，因为内部样式表仅应用于用来创建它们的文档。下面介绍如何创建一个外部样式表，它包含您在此文档中定义的样式。 (1) 选择“文件”→“导出”→“导出CSS样式”，则“导出CSS样式”对话框随即出现。 (2) 在该对话框的“保存在”(Windows)或“位置”(Macintosh)弹出式菜单中，定位到您的本地站点文件夹。 (3) 在“文件名”(Windows)中，将该文件命名为mystyle.css。 注意：可以将CSS样式表命名为所希望的任何名称，名称必须小写并且不能包含空格。 (4) 单击“保存”按钮保存所创建的样式表。 14.3.3 套用样式 可以把刚才创建的CSS样式表附加到站点内的另一个文档中。在此使用的文档与应用样式前的原始css_start.htm文件相同。方法如下： (1) 在Dreamweaver中，如果“站点”面板尚未打开，请打开它即选择“窗口”→“站点”。 (2) 在“站点”面板中找到名为css_start2.htm 的文件，然后双击它，以便在“文档”窗口中将其打开。 (3) 在“CSS样式”面板中，单击位于面板底部的“附加样式表”按钮，则“链接外部样式表”对话框随即出现，如图14-17所示。 图14-17 “链接外部样式表”对话框 (4) 在“文件/URL”文本框中输入文件名“mystyle.css”，或者单击“浏览”按钮并在出现的对话框中定位到mystyle.css文件，然后单击“确认”按钮选择它。 (5) 在“链接外部样式表”对话框中，在“添加为”选项下选择“链接”。 (6) 单击“确定”按钮完成操作，则所选样式表随即链接到当前文档中，而样式属性也立即被应用。 14.3.4 重定义HTML标记样式 应用新样式后，几乎区分不出文档中的超级链接。下面我们介绍如何创建一种链接样式。 (1) 在“CSS样式”面板中，单击位于面板底部的“新建CSS样式”按钮(+)，则“新建CSS样式”对话框随即出现。 (2) 在“类型”中选择“使用CSS选择器”。 (3) 在“选择器”弹出式菜单中选择“a:link”。 (4) 在“定义在”列表中选择“仅对该文档”。 (5) 单击“确定”按钮，则“CSS样式定义”对话框随即出现。 (6) 为链接设置下列“类型”属性：在“修饰”中选择“上划线”；在“颜色”文本框中输入#FFCC99。 (7) 单击“确定”按钮完成操作。 要想看到应用于链接的样式，必须在浏览器中查看页面。按F12键即可以预览页面。 14.4 层与动态HTML动画 14.4.1 层的创建与调整 Dreamweaver可以方便地在页面上创建层并可以精确地将层定位。 1．创建层 (1) 若要绘制层