CSS样式表模板表单的应用.ppt

2009-20102009-2010第一学期第一学期第第4章章 CSS样式表、模板、表单样式表、模板、表单4.1 CSS4.2 模板模板4.3 表单表单北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期样式是预先定义好的、格式化文档的工具。本节中介绍样式是预先定义好的、格式化文档的工具。本节中介绍的层叠样式表（的层叠样式表（Cascading Style Sheets,以下简称以下简称CSS样式表）样式表）是由是由W3C（Word Wide Web Consortium）组织批准的一种组织批准的一种网页元素定义规则，是一种可以对网页文档内容进行精确格网页元素定义规则，是一种可以对网页文档内容进行精确格式化控制的工具。式化控制的工具。利用利用CSS样式表可自动格式化网页文档，可将样式表可自动格式化网页文档，可将CSS样式样式表直接存储在网页文档中，也可以将表直接存储在网页文档中，也可以将CSS样式表定义在网页样式表定义在网页文档之外，然后将它链接到多个文档中。当文档之外，然后将它链接到多个文档中。当CSS样式表被修样式表被修改后，使用改后，使用CSS样式表的网页文档格式也都将自动更新。样式表的网页文档格式也都将自动更新。CSS样式表能够控制大多数常用的文本格式属性，如字样式表能够控制大多数常用的文本格式属性，如字体、尺寸、对齐方式等，还可以控制位置、特殊效果、鼠标体、尺寸、对齐方式等，还可以控制位置、特殊效果、鼠标翻转等很多翻转等很多HTML样式不能控制的属性样式不能控制的属性4.1.1 层叠样式表概述层叠样式表概述北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期在在Dreamweaver 8中，选择中，选择【窗口窗口】|【CSS样式样式】命令，命令，或者按组合键或者按组合键 Shift+F11，也可以单击【属性】面板的【也可以单击【属性】面板的【CSS】按钮，就可以打开【按钮，就可以打开【CSS样式】面板，如图样式】面板，如图7-1所示。所示。使用使用【CSS 样式样式】面板可以完成查看、创建、编辑和面板可以完成查看、创建、编辑和删除删除 CSS 样式的操作，并且可以将外部样式表附加到当前样式的操作，并且可以将外部样式表附加到当前网页文档，完成格式化网页文档的操作。网页文档，完成格式化网页文档的操作。在【在【CSSCSS样式】面板下方左下角有【类别】视图、【列样式】面板下方左下角有【类别】视图、【列表】视图和【设置属性】视图表】视图和【设置属性】视图3 3个按钮，右下角有个按钮，右下角有4 4个对个对CSSCSS样式进行操作的按钮，这些按钮的作用如下。样式进行操作的按钮，这些按钮的作用如下。4.1.2 层叠样式表的创建与编辑层叠样式表的创建与编辑北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期图图4-1【CSS样式】面板样式】面板北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期【类别【类别】视图：视图：Dreamweaver Dreamweaver 支持的支持的 CSS CSS 属性分为属性分为 8 8 个类别个类别，字体、背景、区块、边框、方框、列表、定位和扩展。每个类别，字体、背景、区块、边框、方框、列表、定位和扩展。每个类别的属性都包含在一个列表中，可以单击类别名称旁边的加号或减号的属性都包含在一个列表中，可以单击类别名称旁边的加号或减号按钮，展开或折叠这个类别。按钮，展开或折叠这个类别。【列表】视图：按字母顺序显示列表】视图：按字母顺序显示 Dreamweaver Dreamweaver 所支持的所有所支持的所有 CSS CSS 属性。属性。【设置属性】视图：仅显示那些已设置的设置属性】视图：仅显示那些已设置的CSSCSS属性。属性。附加样式：单击此按钮，可选择一个外部样式表文件，并将其链附加样式：单击此按钮，可选择一个外部样式表文件，并将其链接或导入到当前文档。接或导入到当前文档。新建样式：单击此按钮，可打开新建样式对话框，新建一个样式。新建样式：单击此按钮，可打开新建样式对话框，新建一个样式。编辑样式：单击此按钮，可打开编辑样式对话框，编辑制定的样式。编辑样式：单击此按钮，可打开编辑样式对话框，编辑制定的样式。删除样式：选中列表中的样式后，单击此按钮可删除该样式。删除样式：选中列表中的样式后，单击此按钮可删除该样式。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期新建一个新建一个CSS样式，该样式的存放方式有样式，该样式的存放方式有3种。种。如果仅作用于当前网页文档的如果仅作用于当前网页文档的CSS样式，则与网页文件样式，则与网页文件一起保存。一起保存。存放在某个已建好的外部存放在某个已建好的外部CSS样式表文件中。应先附加样式表文件中。应先附加该样式表文件，然后将新建的该样式表文件，然后将新建的CSS样式存放其中。样式存放其中。存放在一个新建的存放在一个新建的CSS样式表文件中。应先新建该样式样式表文件中。应先新建该样式表文件，然后将新建的表文件，然后将新建的CSS样式存放其中。样式存放其中。4.1.3 创建层叠样式和层叠样式表创建层叠样式和层叠样式表 北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期在【在【CSS样式】面板中，设计者可以创建样式】面板中，设计者可以创建CSS样式，在样式，在一个一个CSS样式表文件中可以包含一个或多个样式表文件中可以包含一个或多个CSS样式。样式。创建创建CSS 样式和样式和CSS 样式表的操作步骤如下：样式表的操作步骤如下：（1）选择【窗口】选择【窗口】|【CSS样式】命令，打开【样式】命令，打开【CSS样式】样式】面板。面板。（2）单击【单击【CSS样式】面板右上角的快捷菜单按钮，在弹样式】面板右上角的快捷菜单按钮，在弹出的快捷菜单中出的快捷菜单中,选择【新建样式】命令，或单击浮动面板选择【新建样式】命令，或单击浮动面板右下方的【新建样式】按钮，打开【新建右下方的【新建样式】按钮，打开【新建CSS规则】对话框，规则】对话框，如图如图4-2所示。所示。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期图图4-2【新建新建CSS规则】对话框规则】对话框北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期（3）在）在【选择器类型选择器类型】选项组中，选择要定制的选项组中，选择要定制的CSS样式样式类型单选项。该选项组中类型单选项。该选项组中3个选项的意义如下：个选项的意义如下：选中选中【类（可应用于任何标签）类（可应用于任何标签）】单选项后，可在单选项后，可在【名称名称】下拉列表框中输入样式的名称，该名称必须以下拉列表框中输入样式的名称，该名称必须以“.”开始，开始，确认后便可以创建一个应用于文本范围和选择区域的确认后便可以创建一个应用于文本范围和选择区域的Class属性的样式。属性的样式。选中选中【标签（重新定义定义特定标签的外观）标签（重新定义定义特定标签的外观）】单选项后，单选项后，则可在则可在【标签标签】下拉列表框中输入一个下拉列表框中输入一个HTML标记，或从标记，或从下拉列表框中选择一个标记，这样便可以重新定义定制的下拉列表框中选择一个标记，这样便可以重新定义定制的HTML标记的格式，如图标记的格式，如图4-3所示。所示。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期图图4-3 选择重定义选择重定义HTML标签后的对话框标签后的对话框北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期选中选中【高级高级(ID、伪类选择器等、伪类选择器等)】单选项后，则可为特殊的标签单选项后，则可为特殊的标签组合或含有特定组合或含有特定ID属性的标签定义样式。在属性的标签定义样式。在【选择器选择器】文本框中文本框中输入一个选择器的标签，或从输入一个选择器的标签，或从【选择器选择器】下拉列表中选择一个标下拉列表中选择一个标签，如图签，如图7-4所示。所示。如果要创建一个新样式，应选中如果要创建一个新样式，应选中【类（可应用于任何标签）类（可应用于任何标签）】单选项后，在单选项后，在【名称名称】下拉列表框中输入新样式的名称。下拉列表框中输入新样式的名称。（4）在）在【定义在定义在】选项组的下拉列表中，选择当前要创建的选项组的下拉列表中，选择当前要创建的CSS样式定义在那个样式表文件中。可以是定义在新的样式表文件中，样式定义在那个样式表文件中。可以是定义在新的样式表文件中，也可以是将也可以是将CSS样式定义在某个已经创建好的样式表文件中。样式定义在某个已经创建好的样式表文件中。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期图图4-4选择【使用选择【使用CSS选择器】后的对话框选择器】后的对话框北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期若要创建仅仅作用于当前文档的新样式，可选若要创建仅仅作用于当前文档的新样式，可选【仅对该文仅对该文档档】单选项。单选项。（5）完成设置后单击）完成设置后单击【确定确定】按钮，在按钮，在【CSS样式定义在样式定义在】对话框中设置各类别的属性，如图对话框中设置各类别的属性，如图4-5所示。所示。（6）单击）单击【确定确定】按钮完成样式的创建。按钮完成样式的创建。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期图图4-5【CSS规则定义】对话框规则定义】对话框北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期 当设计者创建和保存了外部的当设计者创建和保存了外部的CSS样式表文件后，样式表文件后，此时在本地网站中就存在了一个此时在本地网站中就存在了一个CSS样式表文件。然后样式表文件。然后每个用该样式表文件中的每个用该样式表文件中的CSS样式格式化的网页文档都样式格式化的网页文档都可以与这个样式表文件建立一种链接。当此样式表文件可以与这个样式表文件建立一种链接。当此样式表文件一经修改，网站中所有链接到此样式表的网页都会发生一经修改，网站中所有链接到此样式表的网页都会发生相应的更新。这样就利用相应的更新。这样就利用CSS样式表实现了对多个网页样式表实现了对多个网页文档的进行批量修改的操作。文档的进行批量修改的操作。4.1.4 外部样式表的链接、导入和编辑外部样式表的链接、导入和编辑北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期如果要对样式表编辑修改可以打开含有该如果要对样式表编辑修改可以打开含有该CSS样式表的网页样式表的网页文档，或在当前网页文档中附加外部文档，或在当前网页文档中附加外部CSS样式表，此时在当样式表，此时在当前的网页文档中能够完成前的网页文档中能够完成CSS样式的复制、删除、添加、修样式的复制、删除、添加、修改和保存等操作。另外，也可以导出当前网页文档中存在改和保存等操作。另外，也可以导出当前网页文档中存在的所有样式表，使它们成为外部独立的的所有样式表，使它们成为外部独立的CSS样式表。样式表。外部样式表的链接、导入和编辑步骤如下。外部样式表的链接、导入和编辑步骤如下。（1）新建一个网页页面。）新建一个网页页面。（2）选择）选择【窗口窗口】|【CSS样式样式】命令，打开命令，打开【CSS样式样式】面板。面板。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期（3）单击面板右上角的快捷菜单按钮）单击面板右上角的快捷菜单按钮 ，在弹出的快捷菜，在弹出的快捷菜单中选择单中选择【附加样式表附加样式表】命令，打开命令，打开【链接外部样式表链接外部样式表】对对话框，如图话框，如图4-6所示。所示。（4）在）在【文件文件/URL】文本框中输入要链接或导入的样式表文本框中输入要链接或导入的样式表文件的路径和名称，或单击文件的路径和名称，或单击【浏览浏览】按钮，在打开的按钮，在打开的【选择选择样式表文件样式表文件】对话框中，选择要链接的对话框中，选择要链接的CSS样式表文件，不样式表文件，不妨假设要链接本地站点下的妨假设要链接本地站点下的docformat.css文件。文件。（5）在）在【添加为添加为】选项组中，可选择用那种方法调用外部选项组中，可选择用那种方法调用外部CSS样式表。两个选项的意义如下：样式表。两个选项的意义如下：选择选择【链接链接】单选项，可创建当前文档和外部样式表之间的单选项，可创建当前文档和外部样式表之间的链接，在链接，在 HTML 代码中创建一个代码中创建一个 link href 标签，并引用已标签，并引用已发布的样式表所在的发布的样式表所在的URL。Microsoft Internet Explorer 和和 Netscape Navigator 都支持此方法。都支持此方法。选择选择【导入导入】单选项，如果是嵌套的样式表，必须使用导入单选项，如果是嵌套的样式表，必须使用导入指令。系统引用已发布的样式表的指令。系统引用已发布的样式表的 URL，将选中的外部，将选中的外部CSS样式表文件导入到当前网页文档中。样式表文件导入到当前网页文档中。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期（6）通常情况下应选择）通常情况下应选择【链接链接】单选项，选择好单选项，选择好CSS样式样式表文件后，单击表文件后，单击【确定确定】按钮，完成外部样式表的链接。按钮，完成外部样式表的链接。图图4-6 链接外部样式表的对话框链接外部样式表的对话框 北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期（7）要对外部样式表进行编辑时，可单击）要对外部样式表进行编辑时，可单击【CSS样式样式】面面板的板的【全部全部】按钮，切换到所有文档模式。在按钮，切换到所有文档模式。在【所有规则所有规则】窗口中，展开窗口中，展开CSS样式表，并选中要编辑的样式表，并选中要编辑的CSS样式，如样式，如选择样式选择样式.char1进行编辑，如图进行编辑，如图4-7所示。所示。（8）在）在【.char1的属性的属性】窗口中，选择要修改的颜色属性，窗口中，选择要修改的颜色属性，如图如图4-7所示。所示。也可以选中样式也可以选中样式.char1，单击右键，在快捷，单击右键，在快捷菜单中选择菜单中选择【编辑编辑】选项，此时在弹出的选项，此时在弹出的【.char1的的CSS样样式定义（在式定义（在docformat.css中）中）】对话框中，修改该样式的各对话框中，修改该样式的各项参数，如图项参数，如图4-8所示。所示。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期图图4-7【.char1】属性修改前后的示意图属性修改前后的示意图 北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期 图图7-8 编辑当前编辑当前CSS样式的对话框样式的对话框 北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期（9）在）在【.char1的的CSS样式定义（在样式定义（在docformat.css中）中）】对对话框中，话框中，【分类分类】列表中显示类别的意义如下。列表中显示类别的意义如下。选择选择【类型类型】可设置可设置CSS样式的文本类型参数。样式的文本类型参数。选择选择【背景背景】可设置可设置CSS样式的背景参数。样式的背景参数。选择选择【区块区块】可设置可设置CSS样式的块参数。样式的块参数。选择选择【盒子盒子】可设置可设置CSS样式的框参数。样式的框参数。选择选择【边框边框】可设置可设置CSS样式的边框参数。样式的边框参数。选择选择【列表列表】可设置可设置CSS样式的列表参数。样式的列表参数。选择选择【定位定位】可设置可设置CSS样式的定位参数。样式的定位参数。选择选择【扩展扩展】可设置可设置CSS样式的扩展参数。样式的扩展参数。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期设计者可以利用层叠样式表为设计的网页添加很多特殊的设计者可以利用层叠样式表为设计的网页添加很多特殊的效果，如文字的特效、阴影，图像的淡入淡出、翻转模糊、效果，如文字的特效、阴影，图像的淡入淡出、翻转模糊、波浪效果，鼠标指针和超链接的各种多姿多彩的变化等，波浪效果，鼠标指针和超链接的各种多姿多彩的变化等，从而使设计的网页变得更加赏心悦目。从而使设计的网页变得更加赏心悦目。4.1.5 层叠样式表的应用层叠样式表的应用北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期滤镜是滤镜是CSS样式表中功能最丰富、效果最奇特的工具之一，样式表中功能最丰富、效果最奇特的工具之一，调整调整Dreamweaver 8 中中CSS样式表的十几种滤镜的参数，就样式表的十几种滤镜的参数，就能在网页上制作出多姿多彩、令人眩目的各种效果。能在网页上制作出多姿多彩、令人眩目的各种效果。将外部的将外部的CSS样式表文件链接到当前的网页文件中，或者直样式表文件链接到当前的网页文件中，或者直接在当前的网页文件中创建新的接在当前的网页文件中创建新的CSS样式表文件，然后打开样式表文件，然后打开【CSS样式定义样式定义】对话框，在对话框，在【分类分类】列表中选择列表中选择【扩展扩展】类别，在类别，在【过滤器过滤器】下拉式列表中便可对选中的滤镜设置下拉式列表中便可对选中的滤镜设置参数，如图参数，如图4-9所示。所示。1 滤镜的概述滤镜的概述北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期图图4-9【CSS样式定义】对话框样式定义】对话框北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期用用Alpha滤镜可以通过具体的数值来指定网页中对象点、线、滤镜可以通过具体的数值来指定网页中对象点、线、面的透明度，使得网页中对象的透明度发生变化，制作出一面的透明度，使得网页中对象的透明度发生变化，制作出一些特殊的视觉效果。些特殊的视觉效果。透明度滤镜的语法格式是：透明度滤镜的语法格式是：filter:Alpha（Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)2 透明度滤镜的应用透明度滤镜的应用北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期透明度滤镜的参数意义如下。透明度滤镜的参数意义如下。Opacity表示滤镜作用后对象的透明度，其值为表示滤镜作用后对象的透明度，其值为100时表示时表示对象完全不透明；对象完全不透明；其值为其值为0时表示对象完全透明。时表示对象完全透明。FinishOpacity是与是与Opacity同时使用的一个参数，如果要同时使用的一个参数，如果要制作出渐变的效果，就可以使用该参数来指定结束时的透制作出渐变的效果，就可以使用该参数来指定结束时的透明度，其数值范围是明度，其数值范围是0100。Style是当以上两个参数都设定后，用于指定渐变区域的是当以上两个参数都设定后，用于指定渐变区域的形状特征。它的值为形状特征。它的值为0表示无渐变；表示无渐变；值为值为1表示直线渐变；表示直线渐变；值为值为2表示圆形渐变；表示圆形渐变；值为值为3表示矩形渐变。表示矩形渐变。StartX、StartY、FinishX、FinishY分别是渐变开始和结分别是渐变开始和结束的坐标值。束的坐标值。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期可以利用混合可以利用混合(blend)和显示和显示(reveal)两种滤镜在页面上添两种滤镜在页面上添加动人的淡入淡出、网页转换效果，前者可以使页面中的加动人的淡入淡出、网页转换效果，前者可以使页面中的对象逐渐消失或显示，后者提供了对象逐渐消失或显示，后者提供了24种网页转换的效果。种网页转换的效果。其语法格式如下：其语法格式如下：filter:blendTrans(duration=时间数值时间数值)filter:revealTrans(duration=时间数值，时间数值，transition=过过渡类型渡类型)其参数意义如下：其参数意义如下：3 显示滤镜的应用显示滤镜的应用北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期duration表示滤镜执表示滤镜执行需要的时间，单位为行需要的时间，单位为秒；秒；transition表示对象表示对象转换的方式，过渡类型转换的方式，过渡类型的数值为的数值为023中的一中的一个数值，其具体意义如个数值，其具体意义如表表4-1所述。所述。表表4-1 transition表示对象转换的方式表示对象转换的方式 北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期模糊滤镜模糊滤镜(Blur)是是CSS的滤镜之一，将其应用到网页文本上的滤镜之一，将其应用到网页文本上可以产生出立体字的效果。模糊滤镜能为制作网页的立体可以产生出立体字的效果。模糊滤镜能为制作网页的立体字标题带来方便，与其他立体字效果的处理方法相比，能字标题带来方便，与其他立体字效果的处理方法相比，能使页面的下载速度明显增快。将滤镜应用到图片上，也能使页面的下载速度明显增快。将滤镜应用到图片上，也能得到意想不到的效果。得到意想不到的效果。模糊滤镜的语法格式是：模糊滤镜的语法格式是：filter:Blur(Add=add，Direction=direction，Strength=strength)模糊滤镜的参数的具体意义如下：模糊滤镜的参数的具体意义如下：4 模糊滤镜的应用模糊滤镜的应用北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期Add用来指定对象的模糊效果，其值是一个可以是逻辑判用来指定对象的模糊效果，其值是一个可以是逻辑判断值断值True(默认值默认值)或者或者False，也可以是除也可以是除0之外的任何数值。之外的任何数值。Direction用来设置模糊的方向，模糊效果是按顺时针的方用来设置模糊的方向，模糊效果是按顺时针的方向进行的，其中向进行的，其中0代表垂直向上，然后每代表垂直向上，然后每45为一个定位，为一个定位，该参数只对该参数只对8个方向有效，分别是个方向有效，分别是0、45、90、135、180、225、270、315。Strength的数值表示模糊的宽度有多少像素，其数值是正的数值表示模糊的宽度有多少像素，其数值是正整数，决定了模糊强度。整数，决定了模糊强度。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期在网页的制作过程中，常常会制作很多布局结构和版式风格在网页的制作过程中，常常会制作很多布局结构和版式风格相似而网页内容不同的页面，这种类型的网页每个页面都要相似而网页内容不同的页面，这种类型的网页每个页面都要一次次制作，不但效率低而且很乏味。一次次制作，不但效率低而且很乏味。Dreamweaver 8的模的模板是一种预先设计好的网页样式，在制作风格相似的页面时，板是一种预先设计好的网页样式，在制作风格相似的页面时，只要套用这种模板便可以设计出风格一致的网页。只要套用这种模板便可以设计出风格一致的网页。在创建一个模板时，必须设置模板的可编辑区域和锁定区域，在创建一个模板时，必须设置模板的可编辑区域和锁定区域，这样这个模板才有意义。当模板在编辑时，设计者可以修改这样这个模板才有意义。当模板在编辑时，设计者可以修改模板的任何可编辑区域和锁定区域。而当设计者在编辑修改模板的任何可编辑区域和锁定区域。而当设计者在编辑修改基于模板的网页时，只能修改那些标记为可编辑的区域，此基于模板的网页时，只能修改那些标记为可编辑的区域，此时网页上的锁定区域是不可编辑的。时网页上的锁定区域是不可编辑的。3.2 模板模板北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期新建的模板时必须明确模板是建在那个站点中。模板文件新建的模板时必须明确模板是建在那个站点中。模板文件都保存在本地站点下的都保存在本地站点下的Templates文件夹中，模板文件的扩文件夹中，模板文件的扩展名为展名为.dwt。任何套用了同一个模板的网页与模板本身都建立了一种链任何套用了同一个模板的网页与模板本身都建立了一种链接关系，当模板改变时，所有使用这种模板的网页都将随接关系，当模板改变时，所有使用这种模板的网页都将随之改变。模板技术可以帮助设计者把网页的布局和内容分之改变。模板技术可以帮助设计者把网页的布局和内容分离，快速制作大量风格布局相似的网页页面，这样设计出离，快速制作大量风格布局相似的网页页面，这样设计出的网页更规范，设计制作和更新维护网页的效率更加高。的网页更规范，设计制作和更新维护网页的效率更加高。在本节中主要讲述创建和保存模板、改变和使用默认的模在本节中主要讲述创建和保存模板、改变和使用默认的模板、将模板应用于页面设计和更新整个站点等内容。板、将模板应用于页面设计和更新整个站点等内容。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期模板创建的方法可以是新建一个空白的模板，然后对它进模板创建的方法可以是新建一个空白的模板，然后对它进行编辑后保存，也可以利用一个现成的网页，设置好可编行编辑后保存，也可以利用一个现成的网页，设置好可编辑区，转存为模板。辑区，转存为模板。在设置模板的可编辑区域时，可编辑区域名称中不能使用在设置模板的可编辑区域时，可编辑区域名称中不能使用以下的字符：以下的字符：单引号（单引号（）、双引号（）、双引号（”）、大于号（）、大于号（）、小于号）、小于号（）、连接符（）、连接符（&）。）。4.2.1 创建与保存模板创建与保存模板北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期模板创建好后，设计者可以利用模板创建新的网页，模板创建好后，设计者可以利用模板创建新的网页，或将模板应用到已建立的网页上。后一种方法在或将模板应用到已建立的网页上。后一种方法在应用中可能会碰到诸如原网页中的模板和新模板应用中可能会碰到诸如原网页中的模板和新模板的可编辑区域如何进行对应的问题，处理起来有的可编辑区域如何进行对应的问题，处理起来有些麻烦，所以比较好的方法还是利用模板来创建些麻烦，所以比较好的方法还是利用模板来创建新的网页。新的网页。4.2.3 应用与修改模板应用与修改模板北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期图图4-10【从模板新建】对话框从模板新建】对话框北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期将模板应用到网页页面制作之前，或已经将模板应用于页将模板应用到网页页面制作之前，或已经将模板应用于页面制作以后都可以对模板进行修改。在面制作以后都可以对模板进行修改。在Dreamweaver 8中，中，当前站点的模板、链接、色彩、图片、动画、库项目等资当前站点的模板、链接、色彩、图片、动画、库项目等资源都存放在源都存放在【资源资源】面板中，利用面板中，利用【资源资源】面板可以很方面板可以很方便地完成模板的修改操作。便地完成模板的修改操作。2.修改模板修改模板北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期当设计者将创建的模板应用到页面制作以后，就可以通过当设计者将创建的模板应用到页面制作以后，就可以通过修改一个模板，来实现修改所有应用此模板的网页。修改修改一个模板，来实现修改所有应用此模板的网页。修改本地站点中的模板，更新与这个模板有关的网页的操作步本地站点中的模板，更新与这个模板有关的网页的操作步骤如下。骤如下。（1）选择）选择【窗口窗口】|【资源资源】命令，或按功能键命令，或按功能键F11，打开，打开【资源资源】面板。面板。（2）单击）单击【资源资源】面板左侧的面板左侧的 模板按钮，在模板按钮，在【资源资源】面板下方的模板列表中选择要修改的模板。面板下方的模板列表中选择要修改的模板。（3）选中要修改的模板后右击鼠标，在快捷菜单中选择）选中要修改的模板后右击鼠标，在快捷菜单中选择【编辑编辑】命令，便可对模板完成修改。命令，便可对模板完成修改。3 更新基于模板的网页文档更新基于模板的网页文档北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期（4）单击面板右上方的按钮）单击面板右上方的按钮 ，选择，选择【更新站点更新站点】命令，命令，在系统显示的在系统显示的【更新页面更新页面】对话框中，选择对话框中，选择【查看查看】下拉下拉列表为列表为【整个站点整个站点】，并选择，并选择【更新更新】对象为当前模板作对象为当前模板作用的网页，并选择用的网页，并选择【显示纪录显示纪录】复选项，如图复选项，如图4-11所示。所示。（5）单击）单击【更新页面更新页面】对话框中的对话框中的【开始开始】按钮，便可更按钮，便可更新当前站点中与这个模板有关的网页。新当前站点中与这个模板有关的网页。图图 4-11【更新页面更新页面】对话框对话框 北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期表单（表单（Form）技术可以实现浏览者同）技术可以实现浏览者同Internet服务器之间信服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再返馈给用户。无论是电子商务、信息经过服务器处理后再返馈给用户。无论是电子商务、网上调查，还是留言板、聊天室，都要求网页能够接收浏网上调查，还是留言板、聊天室，都要求网页能够接收浏览者输入的信息，而表单就是网站获取用户信息的最重要览者输入的信息，而表单就是网站获取用户信息的最重要的手段之一。的手段之一。4.3 表单表单北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期表单有两个重要的组成部分：表单有两个重要的组成部分：1由由Dreamweaver 8生成的表单的生成的表单的HTML页面。页面。2用于处理浏览者在表单域中输入的信息的服务器端应用用于处理浏览者在表单域中输入的信息的服务器端应用程序或客户端脚本。程序或客户端脚本。浏览者在网页上看到有关表单的页面，只是供浏览者输入浏览者在网页上看到有关表单的页面，只是供浏览者输入信息的表单页面。当浏览者按要求在表单中填写有关信息，信息的表单页面。当浏览者按要求在表单中填写有关信息，单击表单的递交（单击表单的递交（Submit）按钮之后，表单内容就会上传）按钮之后，表单内容就会上传到服务器，并且由事先编好的服务器端程序来处理这些信到服务器，并且由事先编好的服务器端程序来处理这些信息，最后服务器再将处理结果发送给浏览者的浏览器。由息，最后服务器再将处理结果发送给浏览者的浏览器。由此可见，表单的应用必须依赖于服务器端脚本才能真正发此可见，表单的应用必须依赖于服务器端脚本才能真正发挥其功能。挥其功能。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期其他表单域的应用其他表单域的应用1.表单图像域表单图像域图像域是一个比较有用的表单域，它的主体是一图像域是一个比较有用的表单域，它的主体是一个图片。在浏览时单击这个图片时，表单就个图片。在浏览时单击这个图片时，表单就会向服务器发送表单中各个表单域的值。图会向服务器发送表单中各个表单域的值。图像域可以代替像域可以代替【提交提交】按钮，一个图像域有按钮，一个图像域有两个值，分别表示单击图像域时鼠标指针的两个值，分别表示单击图像域时鼠标指针的纵坐标和横坐标。在表单中创建图像域的操纵坐标和横坐标。在表单中创建图像域的操作步骤如下。作步骤如下。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期2.表单隐藏域表单隐藏域隐藏域是一种在浏览器上看不到的表单域，也不隐藏域是一种在浏览器上看不到的表单域，也不用对其执行操作，利用隐藏域可以实现浏览器用对其执行操作，利用隐藏域可以实现浏览器同服务器在后台交换信息。由于它是不可见的，同服务器在后台交换信息。由于它是不可见的，所以也不需要为它添加标识文字。所以也不需要为它添加标识文字。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期3.表单文件域表单文件域利用表单的文件域可以从本地计算机向服务器上利用表单的文件域可以从本地计算机向服务器上传文件。表单的文件域包括一个文本框和一个传文件。表单的文件域包括一个文本框和一个浏览按钮。在浏览器中单击浏览按钮，打开选浏览按钮。在浏览器中单击浏览按钮，打开选择文件的对话框，在对话框中选择相应的文件，择文件的对话框，在对话框中选择相应的文件，然后单击表单中的提交按钮便可将文件发送到然后单击表单中的提交按钮便可将文件发送到服务器上。服务器上。北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室2009-20102009-2010第一学期第一学期4.4网页里面的其他元素网页里面的其他元素标签标签-指定网页的超链接基准地址指定网页的超链接基准地址,以改变网页以改变网页中所有使用相对地址的中所有使用相对地址的URL的基准地址的基准地址.比较比较:使用相对使用相对URL,如果下载了一个网站的所有的页面如果下载了一个网站的所有的页面,以后以后在浏览的过程中都可以访问在浏览的过程中都可以访问.使用使用base来定义基准地址来定义基准地址,用户可以通过浏览下