第4章CSS样式表、模板、表单的应用VIP免费

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