在网页中创建表单和样式

第 3 章 在网页中创建表单和样式教 学 提 示 ： 在 Internet 上 使 用 表 单 主 要 是 为 了 实 现 浏 览 者 同 Internet 服 务 器 之 间 的 交 互 。通 过 表 单 ，可 以 将 浏 览 者 的 信 息 发 送 到 Internet 服 务 器 上 ，以 供 处 理 。表 单 也 可 以 使 用 户 与 站 点的 浏 览 者 交 互 。例 如 ，用 户 可 以 询 问 浏 览 者 的 用 户 名 称 和 电 子 邮 件 地 址 ，或 者 对 浏 览 者 做 一 个调 查 ，签 一 下 访 客 簿 ，或 者 提 供 关 于 用 户 的 站 点 信 息 反 馈 。在 Dreamweaver 中 ，用 户 还 可 以 快速 地 设 置 CSS 样 式 ，这 更 突 出 了 使 用 Dreamweaver 来 格 式 化 文 本 的 功 能 。CSS 是 网 页 设 计 中众 多 样 式 的 集 成 ，使 用 CSS 可 以 使 页 面 风 格 统 一 化 和 标 准 化 。CSS 提 供 的 链 接 功 能 可 以 让 所 有的 网 页 使 用 同 一 种 样 式 ，需 要 改 变 页 面 的 风 格 时 ，只 需 要 改 变 CSS 文 件 中 对 样 式 进 行 注 释 的 内容 就 可 以 了 。本 章 将 介 绍 利 用 Dreamweaver 在 页 面 中 创 建 、设 置 表 单 和 怎 样 在 Dreamweaver 中快 速 地 设 置 CSS 样 式 制 作 网 页 。教学目标：通过本章的学习，要求用 户掌握创建和设置表 单的方法，了解 CSS 样式的基本知识，掌握使用 CSS 样式制作网页的方法。3.1 使用表单制作动态网页表单是网页设计者与网页的访问者进行交流的工具，其作用就是从访问 Web 站点的用户那里获得信息。作为一个优秀的网页设计工具，Dreamweaver MX 2004 为用户提供了简单快捷的表单建立方法。表单中包括：单选按钮、复选框、列表、菜单、文本域(单行、多行、密码) 及按钮等元素。部分元素的显示状态如图 3.1 所示。 图 3.1 表单部分组成元素单选按钮文本域(单行)按钮列表网页设计与制作教程563.1.1 创建表单域当访问者在网页的表单对象内输入信息后，这些信息将被程序处理，或者发到规定的邮箱里，于是需要给出网页一个范围。只有在该范围内的表单对象中的信息才会被发送，这个范围就叫做表单域。要创建表单，可执行如下操作：(1) 鼠标单击要插入表单的位置。(2) 选择【插入】|【表单】|【表单】命令，或单击【插入】面板上的【表单】选项卡中的【表单】按钮，此时在编辑区里可看到一个红色虚线的矩形区域，这个方框就是表单域，如图 3.2 所示。 表 单 域 图 3.2 表单域通过表单收集到的用户反馈信息，通常是一些用分隔符(如逗号、分号等) 分隔的文字资料。这些资料可以导入到数据库或电子表格中进行统计、分析，成为具有重要参考价值的信息。 使 用 Dreamweaver 可 以 创 建 表 单 ， 可 以 在 表 单 中 添 加 对 象 ， 还 可 以 通 过 使 用 行 为 来验 证 用户输入信息的正确性。此时，用户需使用文本编辑器自行编写脚本或应用程序以处理表单数据。最常用的表单处理脚本语言是 ASP，其他可选的语言还有 C，Java 以及JavaScript 等。 3.1.2 文本字段/文本区域除了让浏览者就设计者给出的选项进行选择之外，表单还可以让浏览者自己输入文字信息，这对那些不能明确定义选项的情况十分适用。创建文本域有两种方法： 选择【插入】|【表单】|【文本区域】命令，创建文本域。 在【插入】面板上单击【表单】中的【文本区域】按钮。用户还可以利用【属性】面板对文本域进行设置。打开【属性】面板，选取文本域，【属性】面板变成如图 3.3 所示状态。第 3 章 在网页中创建表单和样式 57图 3.3 文本域【属性】面板其中： 【文本域】：设置当前文本域的名字。 【字符宽度】：设置文本域在网页中的长度。注意，不是以像素而是以字数来定义的。 【行数】：设置允许用户输入的行数。 【类型】：其中的三个单选按钮用于设置文本域的类型，分别是单行、多行、密码，默认为多行。单行方式适用于输入姓名、证件号码等信息，多行方式常用于输入留言，而密码方式多用于输入密码。如果用户选择了【密码】单选框，那么这个文本域的内容就成为密码类型，它将以“*”形式显示。 【换行】：变成可选时，可输入换行设置(默认值为“Off”)，即显示横向坐标。注意：【字符宽度】的数值决定文本域的可见宽度，而 【行数 】决定的是可输入的最大行数，两者的区别在脚本编辑时非常明显。图 3.4 是文本域的例子，其中包括密码类型的显示。图 3.4 一般文本域应用的例子3.1.3 列表/菜单列表/菜单是一种非常有用的表单组件。利用它，设计者可以提供一系列的选项，让用户从中选择一项或多项，如职业、年龄等。两者的区别在于，列表是可滚动选项清单，且允许访问者选择多项；而菜单是弹出菜单，这种菜单仅在用户单击时才显示出来，且只能从中选择一项。要创建菜单，可执行如下操作：(1) 选择【插入】|【表单】|【列表/菜单】命令，或单击【插入】面板表单选项卡中的【列表/菜单】按钮 。成功创建后，在光标所在位置就会出现一个列表/菜单元素。(2) 列表/菜单的大小按照设计者给定的选项的长短而变化，因此不需要修改它的长 度。选择一个列表/菜单，其 【属性】面板如图 3.5 所示。(3) 在【列表/菜单】文本框中输入 “bm”，作为菜单的名称。(4) 在【类型】选项组中选取【菜单】单选按钮。网页设计与制作教程58图 3.5 【属性】面板(5) 单击【列表值】按钮，弹出如图 3.6 所示的【列表值】对话框。(6) 在【项目标签】栏中输入项目名称，在【值】栏中输入项目的值，按“Tab”键可以方便地在名称和值之间切换。输入项目的对话框如图 3.7 所示。图 3.6 【列表值】对话框 图 3.7 输入项目的【列表值】对话框(7) 可以在菜单中设置默认值。如果用户没有在菜单中做出选择而直接提交表单，浏览器将发送默认值。打开【属性】面板的扩展栏，在【初始化时选定】列表区中选择一个项目，将其作为默认值。如图 3.8 所示，选中了“-”选项。图 3.8 设置默认值创建列表与创建菜单十分类似，只不过在【类型】选项区中选取【列表】单选按钮，同时在【高度】文本框中设置控制列表的显示行数，在【选定范围】选项组中选中【允许多选】复选框中设置是否允许访问者作多项选择。图 3.9 所示为插入了【地区】列表后的页面，下部的【属性】面板上显示了此列表的属性。图 3.9 地区列表第 3 章 在网页中创建表单和样式 593.1.4 单选按钮与复选框在网页中，圆形的单选按钮和方形的复选框也是很常见的元素。设计者可以通过这两个组件给浏览者提供一系列选项。如果允许浏览者选择一个或多个设计者提供的选项时，则需要用复选框来实现，例如考试题中的多项选择等。1. 单选按钮对于只能允许浏览者在多个选择中选取一个选项时，设计者应该使用单选按钮。这种按钮只允许浏览者在一组选项中做出惟一的选择，如在通常的问卷调查中，性别选项中的“男”或“女”；在确认选项中的“是”或“否”等。如果选择之后需作调整，可选择另外一个而取消前面的选择。插入单选按钮的方法如下：(1) 单击要插入按钮的位置。(2) 在【插入】面板的【表单】选项卡上单击【单选按钮】按钮,也可选择【插入】|【表单】|【单选按钮】命令，光标所在位置将出现一个单选按钮元素 。(3) 如需修改单选按钮属性，选取单选按钮，打开如图 3.10 所示的【属性】面板。图 3.10 设置单选按钮属性其中： 【单选按钮】：设置单选按钮组的名字。 【选定值】：设置选中单选按钮时的值。 【初始状态】：设置单选按钮的初始状态。注意：如果希望单选按钮组实现单选功能， 应指定单选按 钮组内的每个单选按钮相同的组名，否则网页将会把它们当成不同的 组处理，而每个 组都可以作一个 选择。图 3.11 中即显示了插入了【性别】单选按钮后的页面。下面的【属性】面板上显示了文字“男”前面的单选按钮的属性。图 3.11 插入单选按钮网页设计与制作教程602. 插入复选框插入复选框的方法与插入单选按钮的方法相似：选择【插入】|【表单】|【复选框】命令，或者在【插入】面板的【表单】组上单击【复选框】按钮，光标所在位置出现一个复选框元素 。在【属性】面板中可以设置复选框的属性，如图 3.12 所示。图 3.12 设置复选框属性插入复选框后，在它的旁边添加一些解释是非常必要的，图 3.13 中即显示了作为“娱乐”组的多个复选框。图 3.13 插入复选框注意：复选框默认的起始状态是未选中状态，但用 户也可以重新 设置其状态。3.1.5 按钮按钮对于表单来说，是必不可少的组件。当设计好表单后，还需为用户考虑发送已填写完的表单信息或重新填写表单信息的情况。这时就需要为用户提供一个使表单发送、复位的命令按钮。如果浏览者不单击【提交】按钮，在服务器端就不会产生交互的作用。当然，网页中的按钮除了上面两种作用之外，还可以触发一些其他的操作。网页中的按钮也被分成三种不同的功能，以供设计者选择： 提交表单：将表单域内已填写的信息发送到指定的服务器地址或邮件地址。 重设表单：清除表单域内已填写的信息及恢复表单域内的初始设置信息。 自定义按钮：允许网页设计者定义的功能在脚本语言中实现。下面介绍如何设置按钮触发命令。1. 插入一般按钮(1) 将光标定位在表单域中要插入按钮的地方。(2) 在 【 插 入 】 面 板 上 单 击 【 表 单 】 组 中 的 【 按 钮 】 按 钮 ， 或 选 择 【 插 入 】 |【 表 单 】|【 按钮 】命令，即在表单域内插入提交按钮 ，并打开如图 3.14 所示的【属性】面板。图 3.14 插入按钮第 3 章 在网页中创建表单和样式 61(3) 在【按钮名称】文本框内输入按钮的名称。(4) 在【动作】选项区选择按钮类型, 即设置按钮触发的动作。系统默认选定【提交表单】动作类型。在【标签】文本框更改“提交”为“同意”，表示同意提交表单。(5) 再次插入一个按钮，设置其“动作”为“重设表单”，标签为【不同意】。表示当对表单中填写的内容不满意时，重新填写表单。插入两个按钮后的页面如图 3.15 所示。图 3.15 插入按钮后的页面这样就完成了一般按钮的创建和设置工作。2. 插入图像按钮如果觉得按钮的外形太过呆板，与自己的网页风格不匹配，Dreamweaver MX 2004 还可以添加图像按钮，其方法是：(1) 在【插入】面板上单击【表单】组中的【图像域】按钮 ，或选择【插入】|【表单】|【图像域】命令，弹出如图 3.16 所示的对话框。图 3.16 【选择图像源文件】对话框(2) 选择所需要的按钮图片，插入图片并打开【属性】面板，如图 3.17 所示。(3) 设置图像按钮的属性。图片按钮的具体设置与普通按钮一样，这里不再赘述。要注意的是，当使用者单击用户已指定为提交按钮的图片时，表单同样被提交。3. 制作实例综合上面介绍的各种组件，制作一个如图 3.18 所示的例子。网页设计与制作教程62操作步骤如下：(1) 创建空白的表单域。(2) 在表单域中输入“密码”、“确认密码”、“性别”和“生日”等文字。(3) 按 3.1.2 节文本域的创建方法，创建“姓名”、“密码”和“确认密码”的文本域。图 3.17 设置图像按钮的属性图 3.18 一个简单的例子(4) 分别在“性别”的两个选项前插入一个单选按钮，然后打开【属性】面板，在【单选按钮】下方的文本框中输入“sex”，在【选定值】 的文本框中输入“male”或“female”。(5) 添加上“提交”与“重设”两个按钮，具体设置参照 3.1.4 节。这样就完成了一个简单的表单页面。灵活运用表单组件，就可以制作出美观且合理的表单页面。第 3 章 在网页中创建表单和样式 633.1.6 隐藏区域当信息从表单发送到脚本程序中时，设计者往往要发送一些不想让用户看见的内容，这就要用到隐藏框。隐藏框就是用来提供不可见元素的传输渠道。要在编辑器中观察到隐藏区域，可在【插入】面板上单击【表单】选项卡中的【隐藏域】按钮，或在【查看】菜单中选取【可视化助理】|【不可见元素】命令。插入隐藏区域后，文档窗口中以 图标表示隐藏域。可在【属性】面板的【隐藏区域】文本框中输入隐藏区域的名称，在【值】中输入值，其 HTML 语句如下：插入隐藏区域后的窗口如图 3.19 所示。注意：访问者浏览时也不能看见隐藏区域，但是提交表 单时 ，表 单将会连同隐藏区域内的数值一起发送。图 3.19 插入隐藏区域3.1.7 文件域文件域能将任意存储的计算机文件附加到表单上，并与其他数据一起发送。与单行的文本域相比，文件域多了一个【浏览】按钮，其添加方法与前面所介绍的其他表单操作相似。3.1.8 跳转菜单在网站上不可能使用一系列按钮作为主要的导航工具，解决的办法是使用跳转菜单。跳转菜单是一种特别的菜单形式，它利用表单元素形成各种选项的列表。当浏览者在其中选择了一个选项时，该窗口就会跳转到指定的页面。创建跳转菜单的步骤如下：网页设计与制作教程64(1) 选择【插入】|【表单】|【跳转菜单】命令，或在【插入 】面板上单击【表单】选项卡中的【跳转菜单】按钮 ，弹出【插入跳转菜单】对话框，如图 3.20 所示。图 3.20 【插入跳转菜单】对话框(2) 在【文本】文本框中输入第一条项目的标签，按下 Tab 键，Dreamweaver 会自动更新列表。当在【文本】文本框中输入 homepage 时，【 菜单项】中的列表也变为homepage。(3) 在【选择时，转到 URL】文本框中输入目标页面路径和文件名(可以通过浏览按钮选择) ，本例中输入“index.htm”。然后在【打开 URL 于】下拉列表框中设置页面的目标地址。(4) 要添加或删除一个选项，可分别使用 、 按钮；要调整跳转菜单中各选项的 位置，单击 或者 按钮。(5) 在【菜单名称】中设置菜单的名称。(6) 在【选项】选项区中，如果选中【菜单之后插入前往按钮】复选框，则在菜单后面增加触发跳转的按钮；如果选中【更改 URL 后选择第一个项目】复选框，在跳转后把菜单第一个选项设为默认选项。(7) 单击【确定】按钮，就可在指定的位置看到跳转菜单。(8) 插入了跳转菜单后的网页如图 3.21 所示。图 3.21 插入跳转菜单后的网页第 3 章 在网页中创建表单和样式 653.1.9 表单属性表单属性用于修饰所创建的表单，使它更加美观、醒目，也就是告诉计算机如何按照用户的意愿处理所创建的表单。利用插入面板中的表单面板，可以给表单添加文本域、按钮、复选框、单选按钮、弹出菜单、列表、文件域、图像域、隐藏域和跳转菜单等对象。设置表单属性的方法如下：(1) 选取整个表单，显示如图 3.22 所示的属性栏。图 3.22 表单属性栏(2) 在【表单名称】文本框中输入表单的名称，例如“personal ”。(3) 在【方法】下拉列表中设置递交的方式，有 GET，POST 和默认三种方式。图3.22 为 POST 方式。注意， GET 方式主要用于 URL 参数的传递，而 POST 方式主要用于表单的传输。(4) 在【动作】文本框中输入表单提交的服务器文件地址“PersonalReg.asp ”。注意：用户在插入表单组件时，要注意将 该组件插入到表 单域内，否 则，该表单组件中的内容是不能发送出去的。当然一个 页面可以有不只一个表单 域。制作完所有的表单元素后，可以在浏览器中预览表单效果。填写完所需的内容后，即可单击【同意】按钮提交表单，或者单击【不同意】重新填写。3.2 使用 CSS 样式制作动态网页随着网页技术的日趋成熟和网络的进一步普及，人们对网页的要求已经不仅仅满足于在网络上发布信息。人们开始对网页的排版、格式和设计有了越来越高的要求，网页已经一步步地接近了一种全新的艺术表现形式。1996 年底诞生了一种称为样式表(Style Sheets)的技术，全称为层叠样式表(Cascading Style Sheets，简称 CSS)。样式为控制文本或文本区外观的一组格式属性，样式表则包括文档中的所有格式，而外部样式表则可同时控制若干文档的格式。样式表可以定义 HTML 的标签格式，也可定义由 class 属性标识的文本区域以及符合CSS 规 则 的 文 本 等 。 但 是 ， 级 联 样 式 表 的 某 些 属 性 在 不 同 浏 览 器 中 所 显 示 的 外 观 是 不 一样 的 。作为 HTML 的扩充，CSS 具有与 HTML 不同的语法，它可以嵌套在 HTML 里为其所引用，从而对 HTML 中的各个元素的样式进行更加精确、更加全面的定义。3.2.1 CSS 基础在建立样式表之前，必须了解一些 HTML 的基础知识。HTML 语言由标志和属性构网页设计与制作教程66成，CSS 也是如此。 样式表基本语法： HTML 标志 标志属性：属性值；标志属性：属性值；标志属性：属性值； 放置样式表有页面内放置、外部引用和外部导入三种不同的方法。现在首先讨论在HTML 页面内放置样式表的方法。 这个方法必须把样式表信息包括在和标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到和中去。 例如要设置 HTML 页面中所有 P 标题字显示为蓝色，其代码如下：This is a CSS samples页面内容注意： 标记中包括了 TYPE“text/css“ ，这是让浏览器知道正在使用 CSS 样式规则。加入 这 一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不 计。在使用样式表的过程中，经常会有几个标志用到同一个属性，例如，要规定 HTML页面中凡是粗体字、斜体字、1 号标题字显示为红色，按照上面介绍的方法应书写为： B color: red I color: red H1 color: red 显然这样书写十分麻烦，引进分组的概念会使其变得简洁明了，可以写成： B,I,H1 color: red 用逗号分隔各个 HTML 标志，把三行代码合并成一行。 此外，同一个 HTML 标志，可能定义到多种属性，例如，规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为： H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: “ 黑体 “ 第 3 章 在网页中创建表单和样式 67注意：各个标志属性之间用分号隔开。请看下面的一个典型定义：A color: blue使用这条定义，所有的链接都将变成蓝色。通常把所有的定义全包括在 STYLE 元素里面(即放到 HEAD 里面)。下面是一个简单的例子： CSS 测试网页原文化城 一个文学网站 组稿俱乐部 个人工作室 社区论坛 文学频道效果如图 3.23 所示。图 3.23 网页显示效果CSS 本身并不难理解，只要掌握了可以控制的元素，就可以随心所欲地对自己的网页进行加工了。网页设计与制作教程683.2.2 链接文字技术利用 Dreamweaver MX 2004 中对 CSS 的支持，可以轻易地使用各种链接文字上的技巧。方法如下：(1) 选择【窗口】|【CSS 样式】命令，或按 Shift+F11 组合键，弹出如图 3.24 所示的【设计】面板的【CSS 样式】选项卡。(2) 单击右下角【新建 CSS 样式】按钮 ，弹出如图 3.25 所示的【新建 CSS 样式】对话框。图 3.24 样式表编辑窗口 图 3.25 【新建 CSS 样式】对话框(3) 在【定义在】下拉列表中，选中【新建样式表文件】选项；在【选择器类型】选项区中，选中【高级(ID 、上下文选择器等 )】；并在【名称】下拉列表中选择“a:active”。(4) 单击【确定】按钮，弹出如图 3.26 所示的对话框。(5) 输入名称，单击【保存】按钮，弹出如图 3.27 所示的对话框；在该对话框【分类】列表框中，选择不同的分类进行设置可以定义不同的 CSS 样式。下面通过几个较典型的样式实例，介绍其设置方法以供参考。对于下面这些样式，既可以将代码像以前一样放在和之间，也可以将它放在一个扩展名为.css 的文本文件中，然后在所需要引用这个样式的页面的与之间插入下面这个语句：图 3.26 【保存样式表文件为】对话框 图 3.27 【CSS 样式定义】对话框样式 1：当鼠标指针移至链接文字时，下划线消失，而且链接背景变为灰色。此时需第 3 章 在网页中创建表单和样式 69要单击【CSS 样式定义】对话框中【分类】列表框中的【 背景】选项，然后在【背景颜色】右边输入“gray”，如图 3.28 所示。网页设计与制作教程70图 3.28 设置背景颜色结果如图 3.29 所示。说明：background-color 的值即为鼠标放上去时的背景颜色，用户可以自行修改。 (a) 有下划线 (b) 下划线消失图 3.29 应用 CSS 样式后的效果样式 2：鼠标移至链接文字，链接文字变为黑色，而且下划线消失。样式 3：鼠标移至链接文字，间距变大而且颜色变成金色。此时需要单击【样式定义】对 话 框 中 的 【 区 块 】 ， 然 后 在 【 字 母 间 距 】 右 边 输 入 数 字 10， 并 选 择 【 像 素 (px)】 ， 如图 3.30 所示。应用了该样式后，当鼠标滑过链接文字时，页面效果如图 3.31 所示。第 3 章 在网页中创建表单和样式 71图 3.30 设置字母间距 图 3.31 修改文字间距和颜色3.2.3 三维文字运用 CSS 的特效，可以不使用图像就制作出一些原来只有图像才可以做到的文字特效。下面是几个非常实用的三维文字制作方法。1. 浮雕文字浮雕文字，也就是让原来是平面的文字具有立体的浮雕效果，如图 3.32 所示。图 3.32 浮雕文字实现的方法也很简单，其代码如下：浮雕文字网页设计与制作教程72 看，灰色的浮雕文字！ 看，灰色的浮雕文字！2. 彩色浮雕文字彩色浮雕文字就是使上例中的灰色浮雕变成彩色浮雕，代码如下：彩色的浮雕文字彩色浮雕文字 彩色浮雕文字 彩色浮雕文字 第 3 章 在网页中创建表单和样式 73得到的网页如图 3.33 所示。图 3.33 彩色浮雕文字3. 阴影字使用 CSS 定义的阴影字的示例代码如下：阴影字使用 CSS 定义的阴影字的例子 使用 CSS 定义的阴影字的例子 得到的网页如图 3.34 所示。网页设计与制作教程74图 3.34 阴影字4. 加亮边框的文字加亮了边框的文字在网页里面将会特别显眼，示例代码如下：加亮文字边框加亮边框的文字示范 加亮边框的文字示范 加亮边框的文字示范 得到的网页如图 3.35 所示。第 3 章 在网页中创建表单和样式 75图 3.35 加亮文字边框可以通过对源代码的修改来制作出各种不同颜色的彩色浮雕。3.2.4 CSS 滤镜其实 CSS 还给用户提供了更加简单、高效和强大的特效实现方法，即使用 CSS 滤镜实现特效。从 IE 4.0 开始，就提供了一些内置的多媒体滤镜特效。应用这些多媒体滤镜，可以非常方便地给文字加上许多可媲美图片的特效，并且图片还可以运用滤镜效果增色不少，灵活运用 CSS 的滤镜，可以使网页具有很好的视觉效果。主要的滤镜种类及效果如表 3.1 所示。表 3.1 滤镜种类及效果滤镜 效 果Alpha 设置透明度Blur 建立模糊效果Chroma 把指定的颜色设置为透明DropShadow 建立一种偏移的影像轮廓，即投射阴影FlipH 水平翻转FlipV 垂直翻转Glow 为对象的外边界增加光效Gray 降低图片的彩色度Invert 将色彩、饱和度以及亮度值完全翻转建立底片效果Light 在一个对象上进行灯光投影Mask 为一个对象建立透明膜Shadow 建立一个对象的固体轮廓，即阴影效果Wave 在 X 轴和 Y 轴方向利用正弦波纹打乱图片Xray 只显示对象的轮廓1. Blur 滤镜Blur 是常用的 CSS 滤镜之一，使用 Blur 滤镜可以让文字或者图片拥有立体的效果。虽然图像处理软件同样可以达到此类效果，但是，使用 Blur 滤镜，不但让操作变得更加网页设计与制作教程76简单，而且由于用文本代替图片，也可以大大减小网页的所占存储空间，更便于浏览。语法：对于 HTML：ilter:blur(add=add,direction=direction,strength=strength)对于 Script 语言： oblurfilter= object.filters.blurBlur 滤镜的参数如下： add 属性：用来确定是否在运动模糊中使用原有目标，其属性值有 0 和 1 两个。属性值为 0 是指在模糊运动中不使用原有目标，大多数情况下适用于图像；属性值为 1 代表在模糊运动中使用原有目标，大多数情况下适用于文本。 direction 属性：用来表示模糊移动时的角度，其属性值为 0360。但是，当实际应用时，会发现其实只有八个方向，每两个相邻方向之间的间隔为 45。 strength 属性：用来表示模糊移动时的距离，该属性值一般可以任意设置。同一网页中可以使用不同参数的 Blur 滤镜，只要给它们命以不同的名称就行了。例如：Blur 滤镜产生的效果，如同用手指在一幅尚未干透的油画上迅速划过，而使画面变得模糊一样。1) 设置 Blur 滤镜(1) 选择 Dreamweaver MX 2004 的【窗口】|【CSS 样式】命令，启动 CSS 样式表编辑器。(2) 单击 按钮，然后在弹出的对话框中单击【新建】按钮，弹出如图 3.36 所示的【新建 CSS 样式】对话框。图 3.36 【新建 CSS 样式】对话框(3) 在对话框中输入要新创建的样式名称，本例为“.blur1”，然后单击【确定】按钮，弹出如图 3.37 所示的【.blur1 的 CSS 样式定义】对话框。(4) 在【分类】列表框中选择【扩展】，在【过滤器】下拉列表中选择 Blur，设置参数为：Blur(Add=true, Direction=135, Strength=8)。(5) 单击【确定】按钮，完成创建。在网页代码的 与之间，会添加如下代码：第 3 章 在网页中创建表单和样式 77图 3.37 设置参数当然，直接把上面的语句加在与之间，也可以起到同样的作用。2) 把 Blur 加载到文字上将.blur1 样式加载到文字的方法如下：(1) 按照自己的需要，在网页上输入合适的文字。(2) 选取所要加载“.blur1”样式的文字所在的单元格，然后选择【窗口】|【CSS 样式】命令，弹出样式表 CSS 编辑器。此时，可以发现比刚才多了一个 .blur1 的选项，这就是刚创建的.blur1 样式，如图 3.38 所示。(3) 在【CSS 样式】面板中选择. blur1 滤镜，此时，可看到应用了 . blur1 文字的源代码为：文字 。图 3.39 中的文字就使用了 Blur 效果。图 3.38 创建了 CSS 样式的 CSS 样式选项卡 图 3.39 Blur 显示效果3) 将 Blur 滤镜加载到图片上比 较 图 3.40 和 图 3.41， 后 者 是 用 滤 镜 效 果 后 的 效 果 图 ， 与 原 图 相 比 ， 产 生 了 模 糊 的网页设计与制作教程78感 觉 。图 3.40 原图 图 3.41 加滤镜后的图像效果要把我们刚才创建的滤镜样式加载到图片上的方法很简单，其具体操作步骤如下：(1) 使用【插入】面板上的图片插入按钮 插入图片。(2) 选择所要插入的图片，然后选择【CSS 样式】面板上的 .blurl 就可以了。2. DropShadow 滤镜DropShadow 滤镜与前面介绍的 Blur 滤镜有点相似，但还是有些区别的。在效果上类似于阴影字，但是实现的方法却简单得多。语法：filter:dropshadow(color=属性值 1，offx= 属性值 2，offy= 属性值 3，positive= 属性值 4)；作用：该滤镜主要用于产生重叠效果，其效果是由小括号中的各属性名及其对应的属性值来决定的。DropShadow 滤镜的参数如下： color 属性：用来设置投影文字的颜色，既可以填写颜色的英文名称，又可以填写颜色的十六进制代码。 offx 属性：代表投影文字与原文字之间在水平方向上的偏移量。 offy 属性：代表投影文字与原文字之间在垂直方向上的偏移量。 positive 属性：如果为任何的非透明像素建立可见的投影，就选择 TRUE(非 0)；若为透明的像素建立透明效果，就选择 FALSE(0)。在 CSS 样式定义面板定义“过滤器”，如图 3.42 所示。第 3 章 在网页中创建表单和样式 79图 3.42 定义“过滤器”网页设计与制作教程80DropShadow 滤镜加载到文字上的效果比较好，与 DIV 实现的阴影字相比，Drop Shadow 滤镜的效果显得更加逼真。图 3.43 是一个带阴影的文字效果。提示：在文字中加载 DropShadow 滤镜非常实用，但是要注意，对较小的文字用这个滤镜可能会让文字模糊难辨。所以，DropShadow 滤镜一般都用在比较大而且需要强调的文字上。图 3.43 带阴影的文字3. Shadow 滤镜Shadow 滤镜用于产生下落式阴影效果，其功能与 DropShadow 相似。但是，两者却又有不同之处：Shadow 有渐进阴影感，而 DropShadow 没有渐进感，因此单单从阴影来看，Shadow 会显得更真实一些，但是两者各有各的好处，谁也不能代替对方。图 3.44 所示为应用 Shadow 的效果。Shadow 滤镜的参数如下： color：阴影的颜色，取值格式为#RRGGBB，或者是颜色的英文名字。 direction：设置模糊的方向。如果将此效果应用于一幅没底色的 GIF 图片上，也会产生很好的效果，如图 3.44 右图所示的图片和文字即为应用 Shadow 后的效果。图 3.44 Shadow 滤镜设置前后的图片和文字效果4. Mask 滤镜的应用Mask 是一种功能强大的滤镜，在适当的地方使用 Mask 滤镜可以产生出乎意料的视觉效果。语法：filter:mask(color=color)第 3 章 在网页中创建表单和样式 81使用 Mask 滤镜属性可以为对象建立一个覆盖于表面的膜，其效果就如同戴着有色眼镜看物体一样，如图 3.45 所示即为矩形遮罩效果。图 3.45 矩形遮罩效果其代码为：mask filter .style1 font-size: 9px.style1 font-size: 36pxMask 滤镜对文本效果 Mask 滤镜只有一个参数 color，也就是用来遮罩的颜色，以 #RRGGBB 为格式的颜色值。只 要 在 Dreamweaver MX 中 给 它 选 择 一 种 适 合 的 颜 色 就 可 以 ， 如 上 面 的 Mask 滤 镜代 码 就 是 ：.mask1 filter:mask(color=#FF3300) 其实在 Mask 滤镜的使用中，重要的不是遮罩的颜色而是背景的颜色。上例使用了白色 Mask 遮盖，代码是：.mask1 filter:mask(color=white) 那些五彩缤纷的文字颜色实际上只不过是文字的背景颜色。要完成这种效果也很简单，只要创建一个 11 的表格，选择合适的图片做背景，然后在表格里写上文字，再向单元格加上滤镜就完成了。5. Alpha 滤镜Alpha 滤镜用于改变目标元素的透明度，也就是将目标元素与背景融合。这种溶合程度可以控制，而且通过指定坐标，还可以选定特定目标(如点、线、面) 的透明度。网页设计与制作教程82语法：FILTER：ALPHA(opacity=opacity,finishopacity=inishopacity,style=style, startx= startx, starty=starty,finishx=finishx,finishy=finishy)Alpha 滤镜的参数如下： Opacity：设置透明度。用百分比表示其属性值，范围是 0100，0 表示完全透明，100 表示完全不透明。 FinishOpacity：与 Opacity 一起使用的选择性参数。当同时设置 Opacity 和FinishOpacity 时，可以制作出透明渐进的效果；其属性值也是 0100，0 表示完全透明，100 表示完全不透明。 Style：设置渐变风格。同时设置了 Opacity 和 FinishOpacity 产生透明渐进时，它主要是用来指定渐进的显示形状，0 代表均匀渐进，1 代表线形渐进，2 代表放射渐进，3 代表直角渐进。 StartX 和 StartY：用来设置水平和垂直方向的渐进起