网页设计与制作第6章-Dreamweaver进阶

1、第6章 Dreamweaver进阶本章要点CSS样式的编辑与应用。表单的属性设置。行为的应用。模板的创建与应用。库的创建与应用。6.1 CSS样式介绍CSS样式英文全称是“Cascading Style Sheets”，中文译为“层叠样式表”，也可译为“串联式样式表”， 利用它可以对网页中的文本进行精确的格式化控制。目前，CSS样式已成为网页设计者进行网页设计不可缺少的工具之一。6.1.1 CSS简介前面已经介绍过HTML，它是在CSS样式之前被广泛应用的一种网页样式，它主要用于控制单个文档中某范围内的文本格式。与之不同的是，CSS样式不仅可以控制单个文档中多个范围内的文本格式，而且还可以控制

2、多个文档中的文本格式。例如，要管理一个非常大的网站，使用CSS样式可以快速格式化整个站点或多个文档中的字体、图像等元素的格式，并且还可以实现多种不能用HTML样式实现的其他功能。6.1.1 CSS简介CSS第一个字母代表的是“Cascading”，意思为“串联”，它指不同来源的样式，可以合在一起，形成一种样式。 CSS样式表位于文档的区，其作用范围由CLASS或其他任何符合CSS规范的文本设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。总之，在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制， CSS样式

3、的作用和优势 几乎在所有的浏览器上都可以使用。 以前一些必须通过图片转换才能实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 可以轻松地控制页面布局。 可以将许多网页的风格格式同时更新，不用再一页一页地更新。CSS样式的类型（1）自定义样式与Word中使用的样式类似，可以在任何文本上应用自定义CSS样式。如果网页中应用了“自定义样式”，在其HTML代码中会出现class=” ”的字样，引号内是使用的自定义样式的名字。（2）HTML标记样式对现有HTML标记的重新定义。创建或改变这类样式时，所有应用该标记的文本会自动更新。

4、如：利用CSS重新定义Paragraph，标记代表的格式。（3）样式选择器它是一种特殊类型的样式，专门设置链接文字的格式属性。 样式选择器种类a：active 当前被激活的链接的样式。a：hover 鼠标放置在链接文字上的文字样式。a：link 正常状态下链接文字的样式。a：visited 己访问过的链接的样式。其中，以第种“a：hover”最常用也最有用 。6.1.1 CSS简介对文本的手工格式化会覆盖CSS样式，所以应用CSS样式之前，应删除手工设置的HTML格式或HTML样式。6.1.2 定义CSS样式表一个样式表由样式规则所组成，以告诉浏览器怎样去呈现一个文档。常用的样式表的定义方法有

5、用HTML标记定义、用Class定义及用ID定义三种。 常用的样式表定义方法1使用HTML标记定义使用HTML的Style组件，并将这个元素放置于文档的Head部分，包含网页的样式规则。每个规则包括一个选择符（通常是一个HTML的元素），如Body、P、或EM等。样式规则组成如下：选择符属性：值单一选择符的复合样式声明应该用分号（；）隔开。如：选择符属性1：值1；属性2：值2使用HTML标记定义实例定义H1和H2元素的颜色和字体大小属性：CSS例子H1font-Size: x-large; color: redH2font-Size: large; color: blue上述的样式表告诉浏览器

6、要用加大、红色字体显示一级标题；用大、蓝色字体显示二级标题。常用的样式表定义方法2用Class定义Class属性用于指定元素属于何种样式的类。例如，样式表可以加入Punk类：.Punkcolor:lime;background:#ff80c0这个类可以使用Class属性在HTML中引用。在这个例子中，Punk类可以用于任何Body元素，因为它在样式表中没有HTML元素与之关联。常用的样式表定义方法3用ID定义这里通过一个实例来介绍如何用ID定义CSS样式表。实例【例6-1】用ID标记定义CSS样式表 6.1.3 创建和编辑CSS样式1创建CSS样式（1）选择Dreamweaver菜单栏中的【窗

7、口】|【CSS样式】（快捷键为【Shift】+F11）命令，打开【CSS样式】面板，如图6-10所示。图6-10 【CSS】面板1创建CSS样式（2）单击【CSS样式】面板中的【新建CSS样式表】按钮，打开【新建CSS样式】对话框，如图6-11所示。图6-11 【新建CSS样式表】对话框CSS样式表对话框中各项功能【名称】：输入样式的名称。【类(可应用于任何标签)】：生成一个新的样式。制作完毕以后，就可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面中选中对象，然后选择样式即可。要注意的是，类名称必须以英文句点开头，并且可以包含任何字母和数字组合，例如：“.cssl”。【标签（重新定

8、义特定标签的外观）】：将现有的HTML标签赋上样式。因此制作完毕以后不需要选中对象就可以直接应用到页面中去。CSS样式表对话框中各项功能【高级（ID、上下文选择器等）】：为具体某个标签组合或所有包含特定ID属性的标签定义格式。在【选择器】文本框中输入一个或多个HTML标签，或从弹出式菜单中选择一个标签。弹出式菜单中提供的标签包括a:active、a:hover、a:link和a:visited。CSS样式表对话框中各项功能【定义在】：定义一个外部链接的CSS还是定义一个仅应用于当前文档的CSS。若要在当前文档中嵌入样式，可选择【仅对该文档】单选按钮：若要创建外部链接样式表，可选择【新建样式表文

9、件】。1创建CSS样式（3）单击【确定】按钮，出现【.cssl的CSS样式定义】对话框。（4）设置相应的属性。单击【确定】按钮，CSS样式即创建完成。 6.1.3 创建和编辑CSS样式2样式存在方式CSS样式有两种存在方式，一是“内嵌”到当前文档中，另一种是独立存放在一个文件中，这类文件的扩展名为.css。在【新建CSS规则】对话框的“定义在”选项区中可以选择所定义的存放位置。当选中【新建样式表文件”选项时，单击【确定】按钮，将打开【保存样式表文件为】对话框，如图6-4所示，在该对话框中可以将当前的CSS样式以文件的形式保存。2样式存在方式图6-4 保存CSS文件对话框6.1.3 创建和编辑C

10、SS样式3编辑CSS单击【CSS】面板上的【编辑】按钮，打开CSS样式表编辑窗口，这个窗口包括了编辑CSS样式表的所有操作。如果样式列表中没有CSS样式文件，可以选择【链接】或【新建】命令；如果列表中有CSS样式文件，选择后可以单击【编辑】、【复制】或【删除】命令，对样式文件进行相应的编辑，但是不能复制链接的样式文件。完成编辑后单击【完成】按钮确认。3编辑CSS单击样式表编辑窗口中的【编辑】按钮，会弹出另一个对话框，左侧的列表框中列出了样式表文件中所有的CSS样式。单击【新建】按钮可以在CSS样式表中添加新样式，在列表中选择一个CSS样式，可以对其进行【编辑】、【复制】或【删除】操作。编辑操作

11、完成后，单击【保存】按钮，将结果保存到CSS样式表中。 6.1.3 创建和编辑CSS样式4快速操作CSS样式单击CSS面板上右上方的“扩展】按钮，会弹出一个菜单，如图6-5所示。 图6-5 CSS样式面板的扩展菜单4快速操作CSS样式该扩展菜单主要分为三个部分 ，上部为样式操作命令，中部为样式文件操作命令，下部为面板操作。当选择一个CSS样式，再选择菜单上半部分的编辑命令，可以直接对选中的CSS样式进行编辑。分割线下面的一组命令可以对整个CSS样式表文件进行编辑。6.1.3 创建和编辑CSS样式5链接外部CSS样式文件使用CSS样式最有效的方法，就是建立外部CSS样式表文件。在网页中只要链接这

12、个样式表文件，就可以直接应用其中的CSS样式。这样只要在样式表中设置一次CSS样式，所有的网页都可以共享，极大地简化了网页制作过程。如果在样式表中修改了CSS样式，则应用了该样式的网页随之自动更新。6.1.4 CSS样式参数的设置1类型面板使用样式定义的类型面板可以定义样式的基本类型。打开【.cssl的CSS样式定义】对话框，选择【分类】列表框中的【类型】选项，如图6-6所示， 图6-6 类型面板类型面板具体选项【字体】：指定文本的字体。设置时最好选择常用字体，否则有些浏览器无法正常显示。【大小】：设置文字尺寸。常用尺寸为像素，数值可以在下拉列表中选择，也可以直接输入，直接输入的数值大小没有限

13、制。【样式】：设置字体的风格。选项包括正常、斜体及倾斜体。【行高】：设置文本所在处的行高。选择正常将自动计算字体的行高，否则可以输入一个精确值并选择其计算单位。【修饰】：设置链接文本的显示状态。选项包括下划线、上划线、删除线、闪烁和无。默认设置是下划线。【粗细】：设置字体的粗细效果。选项包括正常、粗体、特粗体、细体等9种像素选择。其中正常等于400像素，粗体等于700像素。【变量】：设置字母类文本。选项包括正常和小型大写字母。【大小写】：设置字母的大小写。选项包括首字母的大写、大写、小写和无。【颜色】：设定文本颜色。 6.1.4 CSS样式参数的设置2【背景】选项使用背景面板可以定义样式的背景

14、。打开【.cssl的CSS样式定义】对话框，选择【分类】列表框中的【背景】选项，如图6-7所示， 图6-7 背景选项背景面板具体选项背景颜色和背景图像：设置文本的背景颜色和背景图像。重复：设置背景图像的重复方式，有四个选项（不重复、重复、横向重复、纵向重复）。附件：设置背景图像是否要随滚动条滚动，有两个选项（固定、滚动）。水平位置和垂直位置：设置背景图像的水平位置或垂直位置，单位为像素。 6.1.4 CSS样式参数的设置3区块选项打开【.cssl的CSS样式定义】对话框，选择【分类】列表框中的【区块】选项，如图6-8所示 图6-8 区块选项区块选项单词间距：设置单词的间距。若要设置特定的值，在

15、该下拉列表中选择【值”，然后输入一个数值。在第二个下拉列表中，选择度量单位（如像素、点数等）。字母间距：增加或减少字符的间距。若要减少字符间距，请指定一个负值（如-4）。字母间距设置覆盖对齐的文本设置。、Internet Explorer4.0及以上版本和Netscape Navigator6.0（以下简称两种浏览器）支持字母间距属性。字符间距与行间距的设置在网页文字排版里经常用到。垂直对齐：指应用于元素的垂直对齐方式。仅当应用于标签时，Dreamweave tag才会在【文档】窗口中显示该属性。 区块选项文本对齐：设置元素中的文本对齐方式。两种浏览器都支持文本对齐属性。文字缩进：指定第一行文

16、本缩进的程度。可以使用负值创建凸出，但能否显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver才会在【文档】窗口中显示该属性。两种浏览器都支持文本缩进属性。空格：确定如何处理元素中的空格。从该下拉列表中选择：“正常”指收缩空格；“保留”的处理方式与文本被括在标签中一样（即保留所有空白，包括空格、制表符和回车键）；“不换行”指定仅当遇到标签时文本才换行。Dreamweaver不在【文档】窗口中显示该属性。Netscape Navigator6.0和Internet Explorer5.5及其以上版本支持空格属性。显示：指定是否以及如何显示元素。6.1.4 CSS样式参数的设置4方框

17、选项“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义进行设置，如图6-9所示。图6-9 方框选项方框选项【宽】和【高】设置元素的宽度和高度。“浮动”：设置其他元素（如文本、层、表格等）在哪个边围绕元素浮动。其他元素按通常的方式环绕在浮动元素的周围。两种浏览器都支持浮动属性。“清除”：定义不允许层的边。如果清除边上出现层，则将清除设置的元素移到该层的下方。两种浏览器都支持清除属性。“填充”：指定元素内容与元素边框（如果没有边框，则为边距）之间的空余量。取消选择【全部相同”选项可设置元素各个边的填充。“全部相同”将相同的填充属性设置为应用于元素的“上”、“右”、“下”和“左”。方框选项

18、“边界”指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的空余量。仅当应用于块级元素（段落、标题、列表等）时，Dreamweaver才会在【文档】窗口中显示该属性。取消选择【全部相同”可设置元素各个边的边距。“全部相同”将相同的边距属性设置为应用于元素的“上”、“右”、“下”和“左”。 6.1.4 CSS样式参数的设置5【边框】选项 使用边框面板可以定义样式设置以控制围绕元素的边框。打开【.cssl的CSS样式定义】对话框，选择【分类】列表框中的【边框】选项，如图6-10所示。图6-10边框面板边框面板具体选项【样式】：决定边框样式，但其显示取决于浏览器。Dreamweaver 8

19、的文档窗口中不会显示该属性。该选项可以设置边框的每条边的样式。【宽度】：设置元素边框的粗细，其下拉列表分别列出下列各值。【细】：细边框。【中】：中等粗细边框。【粗】：粗边框。【值】：设置具体的边框粗细值。【颜色】：设置边框对应位置的颜色。可以分开设置边框每条边的颜色，但是显示则取决于浏览器。6.1.4 CSS样式参数的设置6【列表】选项使用列表面板可以定义样式的类型、项目符号图像和位置对齐方式。打开【.cssl的CSS样式定义】对话框，选择【分类】列表框中的【列表】选项，如图6-11所示。图6-11列表面板列表面板具体选项 【类型】：决定项目符号或编号的外观。 【项目符号图像】：允许指定项目符

20、号的自定义图像。既可以直接输入文件名（必要时可以包含路径），也可以单击【浏览】按钮选择一幅图像。 【位置】：决定列表项换行时是缩进还是边缘对齐。缩进时选外选项，边缘对齐时则选内选项。6.1.4 CSS样式参数的设置7定位选项打开【.cssl的CSS样式定义】对话框，选择【分类】列表框中的【定位】选项，如图6-12所示。图6-12 定位选项定位选项 “类型”：用来确定浏览器应如何来定位层。“绝对”使用“定位”框中输入的坐标，相对于页面左上角来放置层。“相对”使用“定位”框中输入的坐标，相对于对象在文档的文本中的位置来放置层。该选项不显示在【文档】窗口中。“静态”将层放在它在文本中的位置。“显示”

21、确定层的初始显示条件。如果不指定可见性属性，则默认情况下大多数浏览器都继承层父级的值。选择以下可见性选项之一：“继承”继承层父级的可见性属性。如果层没有父级，则它将是可见的。“可见”显示层的内容，而不管父级的显示属性如何设置。“隐藏”隐藏层的内容，而不管父级的显示属性如何设置。 定位选项“Z轴”确定层的叠放顺序。编号较高的层显示在编号较低的层的上面，后面创建的层的值较大。它的值可以为正，也可以为负。“溢出”（仅限于CSS层）确定在层的内容超出它的大小时将发生的情况。这些属性控制如何处理此扩展，如下所示：“可见”增加层的大小，使它的所有内容均可见，层向右下方扩展。“隐藏”保持层的大小并剪辑任何超

22、出的内容，不提供任何滚动条。“滚动”在层中添加滚动条，不论内容是否超出层的大小。专门提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱，该选项不显示在【文档】窗口中，并且仅适用于支持滚动条的浏览器。“自动”使滚动条仅在层的内容超出它的边界时才出现，该选项不显示在【文档】窗口中。定位选项置入：设定层的位置和大小。浏览器如何解释位置取决于【类型】设置。如果层的内容超出指定大小，则大小值被覆盖。位置和大小的默认单位是像素。对于CSS层，还可以指定下列单位：pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、ems、exs或%（父级值的百分比）。缩写的后面必须紧跟值，中间没

23、有空格，如3cm。 裁切：定义了层的可见部分。如果指定了剪辑区域，可以通过脚本语言（如JavaScript）访问它，通过使用时间轴和改变属性行为可以设置类似擦除的效果。 8【扩展】选项使用扩展面板，可以对自定义功能进行扩展，但现在大多数的浏览器尚不支持。打开【.cssl的CSS样式定义】对话框，选择【分类】列表框中的【扩展】选项，如图6-13所示。图6-13 扩展面板6.1.4 CSS样式参数的设置扩展面板具体选项 【分页】：当打印到由样式所控制的对象时强行换页。IE4.0版本的浏览器不支持本选项，但比IE4.0更高版本的浏览器可以支持。 【光标】：当鼠标指针停留在由样式所控制的对象之上时，改

24、变指针的图像。只有在IE40才支持本属性。 【滤镜 】：对由样式控制的对象应用特殊效果，包括模糊和反转。从弹出的菜单中可以选择一种效果。只有IE4.0及其以上的版本才支持该属性。6.1.5 CSS样式的应用1使用方法在3种CSS样式类型中，HTML标记样式和样式选择器是自动应用于网页的，应用CSS样式主要指的是应用自定义样式。应用自定义CSS样式的步骤如下。（1）将光标放置在要应用样式的区域。（2）打开CSS面板，在CSS面板上选择要应用的自定义样式。（3）单击【应用】按钮，使“应用”项处于选中状态。6.1.5在网页中应用CSS样式2应用外部CSS样式（1）单击【CSS样式】面板右下角的【附加

25、样式表】按钮，此时将出现【链接外部样式表】对话框，如图6-14所示。图6-14 【链接外部样式表】对话框2应用外部CSS样式（2）选择要链接到或导入到当前文件的外部样式表文件，如图6-15所示。（3）单击【确定】按钮即可。 图6-15 选择外部样式表文件6.1.5在网页中应用CSS样式3将样式从选定内容中删除删除【CSS样式】面板中的所选样式，即从应用该样式的所有元素中删除该样式。（1）在【CSS样式】面板中，选中要删除的样式。（2）单击【CSS样式】面板右下角的【删除样式】按钮，或是从面板菜单中选择【删除】命令。（3）这时样式即被删除，同时从样式列表中消失。6.1.5 在网页中应用CSS样式

26、4在HTML中使用CSS将样式表加入到HTML中的方法有很多，主要有嵌入式样式表、内联式样式表、外联式样式表和输入式样式表4种。样式表加入到HTML中的方法（1）嵌入式样式表一个样式表可以使用Style元素嵌入在文档中，其定义格式如下：其中，Style元素放在文档的Head部分，必需的Type属性用于指定媒体类型。样式表加入到HTML中的方法（2）内联式样式表样式可以使用Style属性内联。Style属性可以应用于任意Body元素（包括Body本身），每个声明用分号隔开。例如：这段的样式是红色的New Century Schoolbook字，如果字体可用的话。注意：在Style中New Cen

27、tury Schoolbook包含在单引号中，因为双引号被用做包含样式声明。样式表加入到HTML中的方法（3）外联式样式表一个外部的样式表可以通过HTML的Link元素连接到HTML文档中，其格式如下：标记放置在文档的Head部分，Href调用的是一个CSS外部文件。外部样式表不能含有任何像或这样的HTML的标记，样式表仅仅由样式规则或声明组成。样式表加入到HTML中的方法（4）输入式样式表同外联样式表类似。使用输入式样式表：！import url (CSS文件路径)同外联样式表类似，都采用一个扩展文件。它们的不同之处在于引用方法不同。输入式样式表的引用方法是：import url(文件路径)

28、。注意：其它的CSS规则应该仍然包括在标记中，但所有的import声明必需放在样式表的开始部分。6.1.5 在网页中应用CSS样式5CSS样式冲突当相同的文本上应用两种或多种CSS样式时，样式可能会产生冲突，并导致不可预料的结果。通常，浏览器显示样式的格式依照以下规则：如果两种样式同时应用于相同文本，则浏览器会将两种样式的所有格式都显示出来，除非样式格式发生冲突。例如，一种样式指定文本的颜色为蓝色，另一样式则指定文本颜色为红色。如果应用于同一个文本的两种样式发生冲突，则浏览器会显示最内部样式设置的格式（即靠近文本的样式）。如果存在直接冲突，则CSS样式（由class属性决定的样式）会覆盖基于H

29、TML标记的样式格式。6.1.6 链接CSS样式1链接CSS样式文件将样式表文件与网页相链接的方法是：在站点中打开想使用样式的网页文件，再单击CSS面板上的按钮，弹出对话框，如图6-16所示。图6-16 链接外部样式文件1链接CSS样式文件在打开的对话框中，选择样式文件目录下的CSS样式文件“css1css”，单击【选择】按钮，将外部的CSS样式表链接到当前网页。6.1.6 链接CSS样式2应用CSS样式修饰网页文本具体步骤如下：（1）将光标放在文档中，在【属性】面板上选择【格式】项中的【标题1】。（2）将光标定位在正文段落中，在【属性】面板上选择【格式】项中的【段落】。（3）用光标选中最后一

30、行字，单击【CSS】面板上的样式。经过上述操作，网页中的文本变为【CSS】样式表中设置的样式格式。6.1.6链接CSS样式3用CSS样式定义超级链接字体属性超级链接在网页中的应用必不可少，文字的超级链接尤其如此。设置了超级链接后，设计者往往需要对该文本重新编辑，因为它们的属性如文本的大小、颜色、是否加下画线等会发生相应变化。用CSS样式就可以很好地实现对文本属性的再编辑。 CSS样式对文本属性的再编辑步骤（1）选择【窗口】|【CSS样式】命令，打开【CSS样式】面板。（2）单击【CSS样式】面板右上角的快捷菜单按钮图，在弹出的快捷菜单中，选择【新建CSS样式】命令，或单击浮动面板右下方的【新建

31、样式】按钮，打开如图6-17所示的【新建CSS样式】对话框。（3）选择【使用CSS选择器】选项。 图6-17CSS样式对文本属性的再编辑方法（4）单击【选择】文本框右边下拉箭头，选择要设置的超级链接项目，如图6-17所示。图6-17 新建CSS样式四个选项意义 a:link 用于设置超级链接文本默认的状态属性。a:visited 用于设置访问过的超级链接文本的状态属性。a:hover 用于设置鼠标经过超级链接文本时的状态属性。a:activ 用于设置激活的超级链接文本的状态属性。CSS样式对文本属性的再编辑方法（5）属性设置对话框如图6-18所示，填写完相关参数【确定】即可。图6-18 属性设

32、置对话框CSS样式对文本属性的再编辑方法（6）设置完成后，选中网页中待编辑的文本，然后在【设计】面板【CSS样式】标签单击相应的CSS样式表的名字即可。此外，设计者还可以利用CSS样式为设计的网页添加很多特殊的效果，如文字的特效、阴影，图像的淡入淡出、翻转、模糊、波浪效果，鼠标指针和超级链接的各种多姿多彩的变化等，从而使设计的网页变得更加赏心悦目。6.2 表单6.2.1 插入表单6.2.2 创建表单并设置其属性6.2.3 向表单内添加对象6.2.4 建立表单的单选按钮和复选框6.2.5 表单属性6.2.1 插入表单1表单表单（Form）是一种重要的网络交互工具，它可以实现浏览者同Interne

33、t服务器之间信息的交互传送，它是网络信息收集处理的一种重要方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。无论是电子商务、网上调查，还是留言板、聊天室，都要求网页能够接收浏览者输入的信息，而表单就是网站获取用户信息的最重要的手段之一。1表单表单主要有两个重要的组成部分：一个是前台：由Dreamweaver 8生成的表单的页面；一个是后台：即服务器端应用程序或客户端脚本，用于处理浏览者在表单域中输入的信息，如CGI或ASP程序等。1表单浏览者在网页上看到有关表单的页面，只是供浏览者输入信息的表单页面。当浏览者按要求在表单中填写有关信息，单击表单的递交（S

34、ubmit）按钮之后，表单内容就会上传到服务器，并由事先编好的CGI或ASP程序来处理这些信息，最后服务器再将处理结果返还给浏览者的浏览器。可见，表单的应用必须依赖于服务器端脚本才能真正发挥其功能。6.2.1 插入表单2创建表单表单主要的功能是接收输入的信息。在网页中创建表单三种方法：（1）将光标定位在要插入表单的位置上，选择【插入】|【表单】命令，便可在网页的指定位置上插入一个红色虚线构成的表单区域。（2）将光标定位在要插入表单的位置上，单击【插入栏】|【表单】选项卡中的【表单】按钮，便可在网页的指定位置上插入一个表单区域。（3）直接将【插入栏】|【表单】选项卡中的【表单】按钮拖入网页编辑窗

35、口的表单插入区域。用以上三种方法创建的表单区域，在页面上用红色虚线框表示。红色虚线框确定了当前表单的边框，这种红色边框的大小是不能被编辑的。当设计者在表单区域中插入对象后，表单的区域会自动调整其大小。2创建表单在创建表单后，就可以在表单中插入各种表单域。要在网页中插入表单域有两种方法：一种是利用网页编辑窗口的菜单命令，选择【插入】|【表单】命令，在其子菜单中选择相应的命令插入表单域；另一种是直接单击【插入栏】浮动面板组【表单】选项卡，从中选择要插入的表单域。本章主要介绍的方法是直接从【表单】选项卡中选择有关表单域，然后将其插入到网页中，如图6-19所示。图6-19 表单选项卡3Dreamwea

36、ver表单域的特点和功能（1）文本框 ：用来输入的文字或数字。插入的文本可显示为单行、多行，但是浏览者输入文字较麻烦，故在表单中应少用文本框，尽可能使用其他表单对象。（2）隐藏域 ：表单的隐藏域在浏览时是看不到的，浏览者也不能执行该操作。利用隐藏域可以实现浏览器同服务器在后台不公开地交换信息。（3）复选框 ：复选框可以单独使用，也可以成组使用，有选中与不选中两种状态。（4）单选按钮 ：单选按钮只能有一个被选中。3Dreamweaver表单域的特点和功能（5）列表/菜单 ：常用于提交一组可供浏览者进行选择的列表选项。其表现方式为当单击它右侧的列表/菜单按钮时，弹出一个下拉式列表。浏览者可单击列表

37、中某一选项。它在功能上与单选按钮相似，可以提供浏览者在多个备选项中作一个选择，它占网页的面积比单选按钮小得多。（6）跳转菜单 ：插入一个跳转菜单，每个菜单选项都可链接到一个网页或文件。3表单域的特点和功能（7）图片域 ：用于显示图片，也可用作确认按钮。（8）文件域 ：文件域有一个文本框和一个浏览按钮。让浏览者从本地计算机上用表单向服务器上传文件。（9）按钮 ：表单中一般有两个按钮，一个是【提交】按钮，单击此按钮可把浏览者输入的信息发送给服务器；另一个是【重置】按钮，用来清除表单中的内容，把当前表单还原为初始状态。（10）“标签】按钮 ：用于在表单中插入个标签。由于不用标签按钮也可以实现相同功能

38、，所以这个按钮不常用。6.2.2 创建表单并设置其属性1.创建表单表单对象是在表单的基础上存在的，所以要添加表单对象，首先应该创建表单。单击【插入】|【表单】|【表单】命令，或单击【表单”插入面板中的“表单】按钮，可以在文档中插入一个表单域，如图6-20所示。1.创建表单图6-20 在文档中插入表单1.创建表单其次，因为表单属于不可见元素，所以在创建表单域之前应单击【查看】|【可视化助理】|【不可见元素】命令，显示不可见元素。如果仍未显示表单的红色边框，可单击【编辑】|【首选参数】命令，在弹出的“首选参数】对话框的“分类”列表中选择【不可见元素”选项，在右侧选中【表单范围】复选框，如图6-21

39、所示。1.创建表单图6-21 “首选参数】对话框6.2.2 创建表单并设置其属性2设置表单属性要设置表单的属性，可在文档中选中表单域，然后单击【窗口】|【属性】命令，以打开表单域“属性】面板，如图6-22所示。图6-22 表单域【属性】面板表单“属性”面板各主要选项功能“表单名称”文本框：用于输入表单的名称，在同一个文档中表单名称必须惟一。 “动作”文本框：用于指定处理该表单的动态页或脚本的路径，可以是HTTP类型的地址或MAILTO类型的地址。也可以单击文本框右边的文件夹按钮，选择目标文件。表单“属性”面板各主要选项功能“目标”下拉列表框：用于打开一个窗口，并在该窗口中显示调用程序所返回的数

40、据，包含以下四个选项。_blank：用于在未命名的新窗口中打开目标文档。_parent：用于在显示当前文档的窗口的父窗口中打开目标文档。_self：用于在提交表单所使用的窗口中打开目标文件。_top：用于在当前窗口的窗体内打开目标文档。 表单“属性”面板各主要选项功能“方法”下拉列表框：用于设置表单数据发送的方法，包含以下三个选项。默认：使用浏览器的默认设置将表单数据发送到服务器，通常为GET方法。POST：选择该项，将以POST方法发送表单数据，并在HTTP请求中嵌入表单数据。GET：选择该项，将以GET方法发送表单数据，并在GET请求中附加表单数据。表单“属性”面板各主要选项功能“MIME

41、类型”下拉列表框：用于指定对提交给服务器进行处理的数据使用MIME编码类型，包含以下两个选项。application/x-www-form-urlencode：该项通常与POST方法协同使用。multipart/form-data：选择该项，通常用于创建文件上传域。 表单“属性”面板各主要选项功能“类”下拉列表框：用于指定用于该表单的CSS样式。提示：在【方法】下拉列表框中不要使用GET方法发送长表单。URL的长度限制在8192个字符以内，如果发送的数据量太大，数据将被截断，从而导致意外或失败的处理结果。而且，在发送机密用户名和密码、信用卡号或其他机密信息时， 用GET方法传递信息不安全。6.

42、2.2 创建表单并设置其属性3删除表单首先选择要删除的表单，然后按删除键或选择【编辑/清除】命令，删除选中的表单。删除表单后，表单中所有的表单对象也会被删除。6.2.3 向表单内添加对象表单域是一组网页容器，可以包含标准的网页对象，如文本域、按钮、图像域、复选框、单选按钮、列表/菜单、文件域及隐藏域等。表单添加对象的步骤把光标定位在表单域内；然后从单击【插入】|【表单对象】命令，选择一个表单对象。或者使用“插入】面板，将表单对象上的相应按钮拖到表单边界内想放置对象的位置。可用“插入”面板在表单中添加的对象文本域：接受任何类型的文本、字母或数字。输入的文本可以显示为单行、多行、黑点或星号(用于密

43、码保护)。按钮：单击时执行提交或重置表单之类的任务。可以输入自定义的按钮标签，或使用Dreamweaver的预定义标签(提交或重置)。图像域：可以用来显示图像。复选框：在一组选项中选择多项。单选钮：在一组选项中一次只能选择一项。可用“插入”面板在表单中添加的对象列表/菜单：提供一组选项，让用户从中选择一项或多项。该对象可以是弹出菜单，这种菜单仅在用户单击时才显示出来，且仅能从中选择一项。它也可以是列表框，选项总是显示在可滚动列表中，且可以从中选择多项。文件域：允许用户在自己的硬盘上浏览文件，并作为表单数据上传。隐藏域：允许设计者存储信息，如表单的主题，这些信息与用户无关，但却是应用程序在处理表

44、单时所需要的。跳转菜单：插入跳转菜单，这种菜单上的每一选项将链接到一个网页文件。6.2.4 建立表单的单选按钮和复选框单选按钮和复选框是表单中用得较多的元素，而且是网页设计者与浏览者进行交流的最有效的手段。 1创建表单的单选按钮网页中表单的单选按钮一般都是成组出现的，在页面设计时既要为单选按钮组定义一个标识，也要为每一个单选按钮定义一个标识。 创建单选按钮的操作步骤（1）在表单的合适位置插入光标，并输入单选按钮组的标识文字，例如“性别”。（2）然后单击【表单】选项卡中的按钮 ，并输入这个单选按钮的标识文字，例如“男”。（3）选中这个单选按钮，打开单选按钮的属性面板，如图6-23所示。图6-23

45、 单选按钮的属性面板创建单选按钮的操作步骤（4）在【单选按钮】文本框中输入单选按钮的名字“性别”。并在【选定值】文本框中给单选按钮赋值“男”。（5）为这个单选按钮设置初始状态，【初始状态】为【选中】状态。（6）用同样的方法添加另一个标识为“女”的单选按钮。（7）在【单选按钮】文本框中输入单选按钮的名字“性别”，在选定值文本框中给单选按钮赋值“女”。创建单选按钮的操作步骤（8）为这个单选按钮设置初始状态，【初始状态】为【未选中】状态，如图6-24所示。图6-24 表单的单选按钮6.2.4 建立表单的单选按钮和复选框2创建表单的复选框网页表单中的复选框可以单个出现也可以成组出现，单个复选框可用于答

46、案为是或否的回答，成组的复选框可用于一个或多个选项选取的问题。一般情况下，复选框组的标识文字放在复选框之前，而每一个复选框的标识文字放到复选框的之后。2创建表单的复选框当一个复选框被选中后向服务器发送什么值是一件需要解决的问题。服务器端必须有一个接收程序（如用CGI、ASP、PHP等编制的程序），用来接收表单发来的数据，并将这些数据处理后以网页的形式发还给用户端的浏览器。复选框名称和选定值的设置应该按照服务器端接收程序的约定来完成。2创建表单的复选框（1）创建【复选框】具体操作步骤 在表单的合适位置插入光标，并输入复选框组的标识文字，例如“您对本站的态度?” 将光标插入到合适的位置，然后单击【

47、表单】选项卡中的按钮，并输入这个复选按钮的标识文字。 选中该复选框，在复选框的属性面板中为其设置名称和赋值。2创建表单的复选框（2）属性面板中各项参数意义 在【复选框名称】文本框中，给选中的复选框起一个名字，也就是选中该复选框后向服务器发送信息时所用的变量名。 在【选定值】文本框中，输入选中该复选框后要向服务器发送的内容。 在【初始状态】中，选择【选中】单选项表示该复选框初始状态已被选中；选择【未选中】单选项表示该复选框初始状态为待选状态。6.2.4 建立表单的单选按钮和复选框3创建表单的提交和重置按钮在网页中的表单必须添加【提交】按钮，才能将浏览者填写的信息上传到服务器。在Dreamweav

48、er 8另外还设置了一个用于清除表单中填写数据的【重置】按钮。几乎所有网页中的表单都包含【提交】和【重置】按钮。 创建【提交】和【重置】按钮的操作步骤（1）在表单合适的位置上确定插入点，然后2次单击【表单】选项卡中的按钮。（2）在表单中就会生成2个按钮，默认为【Submit】。（3）选中第一个按钮，在按钮的属性面板中设置参数。输入【按钮名称】为Submit；在【值】文本框中输入该按钮上的文字“提交”；在【动作】选项区中选择【提交】单选项，如图6-25所示。创建【提交】和【重置】按钮的操作步骤（4）选中第二个按钮，在按钮的属性面板中设置参数。输入【按钮名称】为Reset；在【值】文本框中输入该按

49、钮上的文字“重置”；在【动作】选项区中选择【重置】单选项。图6-25 表单按钮的属性面板6.2.5 表单属性1列表/菜单属性在表单域中插入并选择列表】|【菜单按钮后，即可显示列表】|【菜单属性面板，如图6-26所示。图6-26 列表/菜单属性在列表/菜单属性面板中可设属性列表】|【菜单：给列表】|【菜单命名，本项必须设置，且名称必须惟一。类型：指定此对象是弹出菜单还是滚动的列表。对于列表，用户可以设置高度，即在不滚动情况下显示出来的选项数；允许多选：设置是否允许用户从列表中选择多项。在列表】|【菜单属性面板中可属性列表值：打开【列表值】对话框，如图6-27所示。在此对话框中，可以添加选项到列表

50、或菜单中。列表中的每个选项都有一个标签，也就是出现在列表中的文本提示，如示例中的“身份证”和一个值2，指当选项被选择时传送给处理程序的一些信息。图6-27 “列表值】对话框在列表】|【菜单属性面板中可属性在【列表值】对话框中，使用“+”或“-】按钮，添加或删除列表中的选项。选项的排列顺序与【列表值】对话框中的顺序相同。当网页被载入浏览器时，列表中的第一项是被选项。使用上下箭头按钮，可重新排列列表中的各个选项。6.2.5 表单属性2文件域属性在表单域中插入并选择列文件域对象后，即可显示文件域属性面板，如图6-28所示。图6-28 文件域属性面板2文件域属性文件域是文本域在类型选择多行时的特殊情况

51、，在文件域属性面板中可以设置以下属性：文件域名称：给文件域进行命名，本项必须设置，且名称必须惟一。字符宽度：设置文件域可显示的最大字符数。最大字符数：设置文件域可以输入的最大字符数。使用此项属性限制文件名长度。6.2.5 表单属性3验证表单数据的有效性我们可以使用JavaScript或其他的脚本语言来创建自己的表单验证脚本，另外还可以使用很多现有的预制脚本。用户可以使用几个扩展，通过鼠标单击来添加表单验证行为，这里仅仅介绍使用行为来校验用户输入的文本内容是否符合要求，以检验填写的年龄为例子。3验证表单数据的有效性先建好一个表单，插入文本域对象，对其进行命名，选择它后再按照以下步骤进行操作：（1

52、）打开【行为】面板，在该面板中单击【+”号，打开下拉菜单，选择【检查表单】命令。（2）此时在弹出的对话框中，从“命名的栏位”下拉列表中选择需要控制的表单项，并在【值”项中选中【必需的”。这一点很重要，即要求用户必须填写该项，不能忽略过去。在下面的“可接受”选项组中可以进行数种的过滤：“任何东西”、“数字”、“电子邮件地址”、“限制区间数字”。在这个例子中限制输入的合法年龄2025岁，如图6-29所示。3验证表单数据的有效性图6-29 “检查表单】对话框3验证表单数据的有效性（3）设置完成后，单击【确定】按钮，此时在【行为】面板的行为列表上可以看form行为：事件是onSubmit，动作是检查表

53、单，即当提交表单时检查表单，如图6-30所示。 图6-30 “行为】面板3验证表单数据的有效性（4）如果在浏览窗口中用户不填写这一项就提交，浏览器会弹出一个信息窗口，提示必须要输入这一项。当在【年龄”项里输入的数字不在20-25之间时，浏览器会弹出信息窗口提示有效的年龄的范围。6.3 行为行为是一系列使用JavaScript程序预定义的页面特效工具，是JavaScript在Dreamweaver中内置的程序库。通过行为，用户可以方便地制作出许多网页效果（如动态页面效果、交互页面效果等），极大地提高了工作效率。6.3.1 行为简介用行为可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动

54、作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化（前面介绍过的轮替图像），就导致发生了一个动作。与行为相关的有三个重要概念对象（Object）、事件（Event）和动作（Action）。1对象（Object）对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至整个页面也可成为对象。2事件（Event）事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上（onMouseOver）、把鼠标放在图片之外（onMouseOut）、单击鼠标（onClick），是

55、与鼠标有关的三个最常见的事件。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。3动作（Action）行为通过动作来完成图片翻转、打开浏览器等动态效果。动作通常是一段JavaScript代码，在Dreamweaver中可用行为往页面中添加JavaScript代码，不必自己编写。4行为（Behavior）将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JavaScript代码相关联，单击鼠标时就可以执行相应的JavaScript代码（动作）。一个事件可以同多个动作相关联，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发

56、生的顺序。4行为（Behavior）Dreamweaver内置了许多行为动作，第三方厂商也提供了更多的行为库，通过下载并在Dreamweaver中安装行为库文件，用户可以获得更多的可操作行为。如果熟悉JavaScript语言，也可自行设计新动作，添加到Dreamweaver中。5调整事件添加行为时，系统自动为我们选择了事件onMouseOver（鼠标经过），如果想采用其他的事件，可以单击行为面板上的“事件菜单】按钮。打开事件菜单，如图6-31所示，重新选择一个触发行为的事件。 图6-31 事件菜单onMouseOver的事件改为onDblclick方法 选择行为面板事件列中的onMouseOv

57、er。 再单击【事件菜单】按钮，打开事件菜单。 选择onDblclick（双击鼠标），行为面板上Events列中的事件立即改变。6.3.2 插入和编辑行为无论是插入行为还是管理行为，都要通过“行为】面板来完成。当然，如果用户对于JavaScript十分熟悉，并且不怕麻烦也可在代码视图中逐行地编辑JavaScript程序。 1插入行为在动作下拉菜单中选择一种动作，将弹出该行为的属性设置对话框，设置完毕后，单击【确定】按钮返回“行为】面板，在【行为】面板上可以看到插入的行为。对于选定的动作，中文版Dreamweaver 8会为该动作设定默认事件，默认事件显示在【行为】面板左栏中，所选定的动作将显示

58、在【行为】面板右栏中。1插入行为例如，想在页面中使用JavaScript程序，则在动作下拉菜单中选择【调用JavaScript”选项，在弹出的对话框中设置完毕，单击【确定】按钮，将会在【行为】面板的列表中显示出刚插入的动作，如图6-32动作默认事件是onLoad（加载），即只要页面加载，就调用该JavaScript程序。图6-32 插入行为2编辑行为如果对于中文版Dreamweaver 8为动作设定的默认事件不满意，可以在事件项中单击鼠标左键，事件处于可编辑状态，然后输入事件的名称（必须是在中文版Dreamweaver 8中定义的）或者单击默认事件旁边的下拉按钮，从下拉列表中选择其他的事件。修

59、改选定动作的属性，可以在【行为】面板右栏中直接双击相应行为的动作，即可打开相关的动作属性设置对话框，在该对话框中可以重新设置选定行为的动作属性。2编辑行为删除行为，单击【行为】面板上方的 按钮，即可将选定的行为删除。排列行为之间的属性，选定需要重新排列的行为，然后通过单击 或 按钮，可以让选定的行为上移一个位置或者下移一个位置。6.3.3 时间轴与动画时间轴是一条贯穿时间的轴，用于表示网页存活时间中发生的各种状态。通过在时间轴上不同的时间部位放置不同的内容，可以实现网页元素的动态效果。编辑带有时间轴的网页时，切记不能移动、重命名或删除被引用的页面元素。1时间轴面板时间轴的设定是通过时间轴面板来

60、进行的。打开时间轴面板的方法是：选择【窗口】|【其他】|【时间轴】命令，打开时间轴面板，如图6-33所示。图6-33 时间轴面板1时间轴面板 “时间轴弹出式菜单”：指定在【时间轴】面板中当前要显示文档的时间轴。“动画通道”：显示动画层和图像的栏。“动画条”：显示每个对象动画的持续时间。一行可以包括多个条，代表不同的对象。不同的条不能在同样的帧中控制相同的对象。1时间轴面板“关键帧”：在这类帧中为对象指定属性（如位置）。Dreamweaver将为两个关键帧之间的帧计算中间值，小圆圈表示这是关键帧。“行为通道”：是在时间轴的某特定帧中应该执行的行为的通道。“帧编号”：包括帧的顺序编号。在【后退”和