第4章CSS样式表、模板、表单的应用演示文稿.PPTVIP

第4章 CSS样式表、模板、表单 4.1 CSS 4.2 模板 4.3 表单 4.1.1 层叠样式表概述 样式是预先定义好的、格式化文档的工具。本节中介绍的层叠样式表（Cascading Style Sheets,以下简称CSS样式表）是由W3C（Word Wide Web Consortium）组织批准的一种网页元素定义规则，是一种可以对网页文档内容进行精确格式化控制的工具。 利用CSS样式表可自动格式化网页文档，可将CSS样式表直接存储在网页文档中，也可以将CSS样式表定义在网页文档之外，然后将它链接到多个文档中。当CSS样式表被修改后，使用CSS样式表的网页文档格式也都将自动更新。 CSS样式表能够控制大多数常用的文本格式属性，如字体、尺寸、对齐方式等，还可以控制位置、特殊效果、鼠标翻转等很多HTML样式不能控制的属性 4.1.2 层叠样式表的创建与编辑 在Dreamweaver 8中，选择【窗口】|【CSS样式】命令，或者按组合键 Shift+F11，也可以单击【属性】面板的【CSS】按钮，就可以打开【CSS样式】面板，如图7-1所示。 使用【CSS 样式】面板可以完成查看、创建、编辑和删除 CSS 样式的操作，并且可以将外部样式表附加到当前网页文档，完成格式化网页文档的操作。 在【CSS样式】面板下方左下角有【类别】视图、【列表】视图和【设置属性】视图3个按钮，右下角有4个对CSS样式进行操作的按钮，这些按钮的作用如下。 图4-1【CSS样式】面板  【类别】视图：Dreamweaver 支持的 CSS 属性分为 8 个类别，字体、背景、区块、边框、方框、列表、定位和扩展。每个类别的属性都包含在一个列表中，可以单击类别名称旁边的加号或减号按钮，展开或折叠这个类别。 【列表】视图：按字母顺序显示 Dreamweaver 所支持的所有 CSS 属性。 【设置属性】视图：仅显示那些已设置的CSS属性。 附加样式：单击此按钮，可选择一个外部样式表文件，并将其链接或导入到当前文档。 新建样式：单击此按钮，可打开新建样式对话框，新建一个样式。 编辑样式：单击此按钮，可打开编辑样式对话框，编辑制定的样式。 删除样式：选中列表中的样式后，单击此按钮可删除该样式。 4.1.3 创建层叠样式和层叠样式表 新建一个CSS样式，该样式的存放方式有3种。  如果仅作用于当前网页文档的CSS样式，则与网页文件一起保存。  存放在某个已建好的外部CSS样式表文件中。应先附加该样式表文件，然后将新建的CSS样式存放其中。  存放在一个新建的CSS样式表文件中。应先新建该样式表文件，然后将新建的CSS样式存放其中。 在【CSS样式】面板中，设计者可以创建CSS样式，在一个CSS样式表文件中可以包含一个或多个CSS样式。 创建CSS 样式和CSS 样式表的操作步骤如下： （1） 选择【窗口】|【CSS样式】命令，打开【CSS样式】面板。 （2） 单击【CSS样式】面板右上角的快捷菜单按钮，在弹出的快捷菜单中,选择【新建样式】命令，或单击浮动面板右下方的【新建样式】按钮，打开【新建CSS规则】对话框，如图4-2所示。 图4-2【新建CSS规则】对话框 （3）在【选择器类型】选项组中，选择要定制的CSS样式类型单选项。该选项组中3个选项的意义如下： 选中【类（可应用于任何标签）】单选项后，可在【名称】下拉列表框中输入样式的名称，该名称必须以“.”开始，确认后便可以创建一个应用于文本范围和选择区域的Class属性的样式。 选中【标签（重新定义定义特定标签的外观）】单选项后，则可在【标签】下拉列表框中输入一个HTML标记，或从下拉列表框中选择一个标记，这样便可以重新定义定制的HTML标记的格式，如图4-3所示。 图4-3 选择重定义HTML标签后的对话框 选中【高级(ID、伪类选择器等)】单选项后，则可为特殊的标签组合或含有特定ID属性的标签定义样式。在【选择器】文本框中输入一个选择器的标签，或从【选择器】下拉列表中选择一个标签，如图7-4所示。 如果要创建一个新样式，应选中【类（可应用于任何标签）】单选项后，在【名称】下拉列表框中输入新样式的名称。 （4）在【定义在】选项组的下拉列表中，选择当前要创建的CSS样式定义在那个样式表文件中。可以是定义在新的样式表文件中，也可以是将CSS样式定义在某个已经创建好的样式表文件中。 图4-4选择【使用CSS选择器】后的对话框 若要创建仅仅作用于当前文档的新样式，可选【仅对该文档】单选项。 （5）完成设置后单击【确定】按钮，在【CSS样式定义在】对话框中设置各类别的属性，如图4-5所示。 （6）单击【确定】按钮完成样式