网页制作基础教程 - 万水书苑-出版资源网

全文

(1)第 4 章 Dreamweaver CS3 高级篇. 4.1. 表单概述. 表单是用来收集浏览者的用户名、密码、E-mail 地址、个人爱好和联系地址等用户信息的输入区域集合。浏览者填写表单的方式一般是输入文本、选择单选按钮或复选框以及从下拉列表框中选择选项等。在填写好表单后，浏览者应该提交所输入的数据，这些数据会根据网页设计者设置的表单处理程序以各种不同的方式进行处理。除了直接嵌入到网页的简单表单以外，在 WWW 中还有大量复杂的表单可以传递更多的信息和完成更加复杂的功能。例如，在网上购物时，往往需要填写多个相关信息的表单，最后才能完成信息的提交。在申请一些免费账号时，也需要填写一系列的表单才能最终获得想要的账号。另外，WWW 上大量的调查表也是用表单实现的。为了制作好复杂的表单网页，在 Dreamweaver CS3 中提供了文本框、文本区、单选按钮、复选框、下拉列表框、提交按钮和重置按钮等丰富的表单域。这些表单域具有以下各自不同的功能：（1）单行文本框。单行文本框用来输入比较简单的信息，如网页中的“按姓名查找” 、 “按部门查找”等。（2）多行文本框。如果需要输入建议、需求等大段文字，使用单行文本框就显得力不从心了，这时通常使用带滚动条的多行文本框。如“同学录注册”等表单中的“简介”即为多行文本框。（3）单选按钮。单选按钮常用于表示唯一的选择结果，如“同学录注册”等表单中的“性别”按钮。（4）复选框。复选框常用来表示许多项可以同时选中的事物，比如个人爱好、所学科目和选购的产品种类等。（5）下拉列表框。当需要选择职业、文化程度等事项时，除了文本区以外，还可以考虑使用下拉列表框。比如“同学录注册”表单中的“学历”、“婚姻”和 “状况”都是下拉列表框。下拉列表框比文本区节省空间，但是不直观。（6）提交按钮和重置按钮。当用户完成了表单的填写后，如果需要提交数据，则可以单击表单中的提交按钮，通常按钮上的文字为“提交”或“确认”等，如果希望恢复表单为填写前的状态以便重新填写，则可以单击“重置”按钮，通常按钮上的文字为“重置”、“重填” 或“重新填写”等。 4.1.1 利用 Dreamweaver CS3 创建表单 Dreamweaver CS3 提供了一个专门的表单对象插入面板，该面板上包含了各种表单对象。选择“窗口”→“插入”命令，打开插入面板，单击插入面板上的“表单”标签切换到插入.

(2) ▌▎网页制作基础教程 ▎▌. “表单”面板，即可看到各种表单元素，如图 4-1 所示。插入“表单”面板上的各个按钮，从左到右依次为：插入表单、插入文本字段、插入隐藏域、插入复选框、插入单选按钮、插入单选按钮组、插入列表/菜单、插入跳转菜单、插入图像域、插入文件字段、插入按钮、插入标签、插入字段集等。. 图 4-1. 插入“表单”面板. 4.1.2 创建空白表单本节以“同学录注册”为例介绍利用 Dreamweaver CS3 制作和编辑网页表单的方法。因为在发送表单时是以整个表单发送的，所以在插入表单元素前，先要在网页中插入空白表单，然后才能在表单中插入表元素（如文本框、按钮、列表/菜单、图片等），以达到整体发送的效果。为了使表单整齐、漂亮，这里采用表格形式。（1）单击“新建”按钮，打开一个新的网页，输入标题“同学录注册”，设置标题的颜色和字体并居中。（2）将光标置于文本后，按 Enter 键，单击插入“表单”面板上的“插入表单”图标，此时将在网页中出现一个红色虚线围成的矩形边框，该红色边框即为空白表单的边框，在窗口的左下方出现一个<form>字样，同时“属性”面板变成表单的属性。如果没有看到所创见的表单，选择“查看”→“可视化处理”→“不可见元素”命令，即可显示设计视窗，如图 4-2 所示。. 图 4-2. 显示设计视窗. - 94 -.

(3) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 表单“属性”面板中各项的含义如下：表单名称：给表单命名，该名称必须是唯一的，因为其在脚本语言中将作为变量名使用。方法：表示处理表单的方法。在该下拉列表中有 3 个选项：  GET：为表单值添加一个 URL，并向服务器发送 GET 请求。因为 URL 被限定在 8192 个字符之内，所以不要对内容较多的表单使用 GET 方法。  POST：在消息正文中发送表单值，并向服务器发送 POST 请求。  默认：使用浏览器的默认方法（一般为 GET）。动作：制定处理表单信息的服务器应用程序。可以单击其后面的浏览图标选择对话框中的应用程序，或直接输入应用程序的路径、文件名。 MIME 类型：指定对提交个服务器进行处理的数据使用 MIME 编码类型。有两个选项默认设置，其中 application/x-www-form-urlcncode 通常与 POST 方法协同使用。如果要创建文件传域，应指定 multipart/form-data MIME 类型。目标：指定一个窗口，在该窗口中显示调用程序所返回的数据。目标值有 4 个选项：  _blank：在未命名的新窗口中打开目标文档。  _parent：在显示当前文档的窗口的父窗口中打开目标文档。  _self：在提交表单所使用的窗口中打开目标文档。  _top：在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中。（3）在表单内插入一个 10×4 的表格，并根据需要合并单元格，调整单元格的大小并隐藏表格边框。 4.1.3 利用 Dreamweaver CS3 添加表单元素 1．插入并设置文本框文本框是一个接受文本信息的空白框。在文本框中几乎可以容纳任何类型的文本数据。利用它可以使网页设计师不必限制访问者提交的内容。在网页中，常见的文本框有以下 3 种形式：  单行文本框：只能用来输入一行信息。  多行文本框：可以由设计者限定行数，并决定是否出现滚动条。该文本框可以输入多行信息。  密码文本框：在该文本框中输入的信息都会以“*”显示在屏幕上。（1）插入单行文本框。先将光标置于第一个单元格中，输入提示信息“用户名：”，然后将光标移至后面的单元格中，单击插入“表单”面板上的“插入文本字段”图标，或选择“插入”→“表单对象”→“文本域”命令，此时会在表单中插入一个单行文本框。（2）插入多行文本框。插入多行文本框的方法与用户名文本框的建立方法基本一致。首先将光标移到相应的单元格中，输入提示文本“简介： ”，然后单击插入“表单”面板上的“插入文本区域”图标，或选择“插入”→“表单对象”→“文本区域”命令，此时会在表单中插入一个多行文本框。（3）插入密码文本框。首先将光标置于表单中，在合适的位置输入提示信息“密码：”。然后单击插入“表单”面板上的“插入文本字段”图标，或者选择“插入”→“表单对象” →“文本域”命令，在表单中插入一个单行文本框。单击此单行文本框，在“属性”面板上 - 95 -.

(4) ▌▎网页制作基础教程 ▎▌. 的“类型”下单击“密码”单选按钮，则单行文本框变成了密码文本框。如图 4-3 所示。. 图 4-3. 添加文本框的效果. （4）设置文本框属性。在表单中插入文本框后，选择所插入的文本框，此时“属性”面板中各选项的含义如下：文本框名称：用于给文本框命名。每一个文本框必须有一个唯一的名称。也就是说，有多个文本域时，名称不能相同。字符宽度：指定文本框所能显示的字符数。一个中文为两个字符。类型：指定文本框的类型。此项包含以下 3 个选项：  单行：选择此选项得到 INPUT 标记，其 Type 属性设置为 text。Char Width 设置被映射为 size 属性，Max Chars 设置被映射为 maxlength 属性。  多行：选择此选项得到 TEXTAREA 标记。Char Width 设置被映射为 cols 属性，Num Lines 设置被映射为 rows 属性。  密码：选择此选项得到 INPUT 标记，其 Type 属性设置为 password。Char Width 和 Max Chars 设置的映射与单行文本域相同，当用户在密码文本域输入密码时，输入内容被显示为“*”。最大字符数：文本框所能输入的最大字符数。在多行文本框中，该参数将变成“行数”，表示输入的最大字符行数。初始值：表单首次载入时文本框中显示的值。换行：在多行文本框中换行的方式。有以下 4 种选择：  默认：当输入的字符数达到字符宽度时会自动产生换行。  关：当输入的字符数大于字符宽度时自动产生水平滚动条，只有当用户按 Enter 键后才能强制换行。  虚拟：当输入的字符数达到字符宽度时将自动产生换行，但系统将自动换行的数据 - 96 -.

(5) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 作为字符串处理。  实体：当输入的字符数达到字符宽度时会自动产生换行，但系统可以处理自动换行的数据。根据要求完成文本框各项属性的设置并插入其他的文本框。 2．插入并设置单选按钮（1）插入单选按钮。要在表单中插入单选按钮，首先将光标置于表单中的相应位置，输入提示信息，如“*性别：”。然后单击插入“表单”面板上的“插入单选按钮”图标，或者选择“插入”→“表单对象”→“插入单选按钮”命令，插入单选按钮，再输入“男”。用同样的方法输入单选按钮“女”。（2）设置单选按钮的属性。在表单中选择单选按钮后， “属性”面板将变为如图 4-4 所示。. 图 4-4. 单选按钮“属性”面板. 该面板中各项的含义如下：单选按钮：给单选按钮命名。同一组的单选按钮名称必须相同，这一点非常重要。选定值：设置单选按钮被选时的取值。当用户提交表单时，该值被传送给处理程序（如 CGI 脚本），应赋给同组的每个单选按钮不同的值。初始状态：指定首次载入表单时单选按钮是“已勾选”还是“未勾选”。一组单选按钮中，只能有一个按钮的初始状态被设为选中。在“选定值”文本框中可以设置按钮被选中时的取值，在传送表单时，传送的不是在网页上的显示值或文本，而是“选定值”框中的值。所以在设置单选按钮的属性时，必须把“选定值”属性改成处理程序（如 CGI 脚本）相匹配的值。 3．插入并设置复选框（1）插入复选框。首先将光标置于表单中的相应位置，输入提示信息“兴趣”，再给复 - 97 -.

(6) ▌▎网页制作基础教程 ▎▌. 选框添加说明性语言，如“读书”、“旅游”、“体育”和“音乐”。然后单击插入“表单”面板上的“插入复选框”的图标，或者选择“插入”→“表单对象”→“复选框”命令，在选项的合适位置加入复选框。（2）设置复选框的属性。在表单中选择复选框后，其“属性”面板的显示与单选按钮“属性”面板基本相同（只是图标不同）。但在给复选框命名时，要注意复选框与单选按钮命令的区别，单选按钮是以“组”为单位的，而复选框则是以“个”为单位的，所以每一个复选框的名称都不应该相同。在指定复选框的“选定值”时，由于一组复选框中可以有多个选项被选中，所以在指定 “选定值”时也应输入能代表选项意义的值。如图 4-5 所示。. 图 4-5. 添加复选框的效果. 4．插入并设置下拉列表框（1）插入下拉列表框。要在表单中插入下拉列表框，应按照以下步骤进行： 1）首先将光标置于表单中的相应位置，输入提示信息“*学历”。 2）单击插入“表单”面板上的“插入列表/菜单”图标，或者选择“插入”→“表单对象” →“列表/菜单”命令，则在表单中出现下拉列表框的框架。选中该下拉列表框， “属性”面板变成下拉列表“属性”面板。 3）选择“类型”为“列表”，单击“属性”面板上的“列表值”按钮（确保下拉列表框处于选择状态），弹出“列表值”对话框。 4）在“列表值”对话框的“项目标签”下输入要在列表框中显示的内容，在“值”下输入与显示内容相应的值（传送到服务器中的即为该值），即可为列表框加入显示的内容。 “列表值”对话框中各项的意义如下： - 98 -.

(7) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. +/-图标：用来增加或删除列表值。  项目标签：该标签将作为列表中的显示项。  值：列表项的值，当在列表中选中相应的列表时，该值将传送到服务器中进行处理。  上移/下移图标：单击该图标可以移动列表项的顺序。在“项目标签”中依次输入：大专、大学、硕士、博士，此时“属性”面板设定“初始化时选定”为“大专”，并设定“选定范围”为“不允许多选”，即不选择“允许多选”复选框。按照上述方法插入“*婚姻”、“*状况”和“*职业”下拉列表框，并添加内容，如图 4-6 所示。 . 图 4-6. 添加下拉列表框的效果. （2）设置下拉列表框的属性。在表单中插入下拉列表框后，选择所插入的下拉列表框，其“属性”面板中各项的含义如下：  列表/菜单：给列表或菜单命名。该项必须设置，且名称必须唯一。  类型：表示此元素是下拉列表框还是菜单列表框。 “列表”表示创建下拉列表框， “菜单”表示创建菜单列表框。  选择范围：对下拉列表框中选择的设置。如选中其后的“允许多选”选项，则表示在下拉列表框中可以选择多个选项。  高度：菜单列表框的高度，即在不滚动的情况下显示出来的选项数。  初始化时选定：首次载入列表时出现的值。  列表值：打开“列表值”对话框，在此对话框中即可设定列表项。根据要求完成下拉列表框各项属性的设置。 5．插入按钮（1）插入“提交”按钮。首先将光标置于要插入按钮的表单中，单击插入“表单”面板 - 99 -.

(8) ▌▎网页制作基础教程 ▎▌. 中的“插入按钮”图标，或者选择“插入”→“表单对象”→“按钮”命令，则在表单中插入一个“提交”按钮。如图 4-7 所示。（2）插入“重置”按钮。要在网页中插入“重置”按钮，则首先在表单中插入“提交” 按钮，选中此按钮，在“属性”面板的“动作”下单击“重设表单”单选按钮，则在表单中出现“重置”按钮。（3）插入普通按钮。普通按钮的创建方法与“重置”按钮的创建方法基本相同，但在“属性”面板上的“动作”下要选择单选按钮“无” 。. 图 4-7. 插入“提交”按钮. （4）按钮属性设置。表单中的 3 种按钮可以通过选择“属性”面板“动作”中的不同选项实现相互交换。按钮的“属性”面板中各项的含义如下：按钮名称：Dreamweaver 有两个保留名称提交”和“重置”。 “提交”指示域给处理程序或脚本；“重置”恢复所有表单域为它们各自的初始值。标签：显示在按钮上的文本。动作：确定按钮被单击发生什么动作，本属性有 3 个单选按钮供选择。  提交表单：单击该按钮时，将向服务器发送表单数据。  重设表单：单击该按钮时，表单中各元素值都将变成刚载入时的数据。  无：单击该按钮时，不发生任何动作，提交和重置动作都不发生。按照上述方法插入“注册”和“重填”按钮，即可得到完整的“同学录注册”网页。 6．设置表单的背景颜色因为表单是以表格形式创建的，所以可以通过设置表格的背景颜色来设置表单的背景颜色。下面通过设置“同学录注册”的背景颜色来说明设置表单背景颜色的方法。选中表格的每一行，通过单元格“属性”面板设置单元格的背景颜色。设置完背景颜色， “同学录注册”表单基本上完成了。如图 4-8 所示。. - 100 -.

(9) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 图 4-8. 4.2. “同学录注册”表单的效果. 利用图层技术制作网页. 4.2.1 认识图层图层又称层，是 Dreamweaver CS3 中最有价值的对象之一，是由层叠式表发展过来的，提供了一种对网页对象进行有效控制的手段。层可以包含文本、图像、表单、插件，甚至层内还可以包含其他层，即在 HTML 文档的正文部分可以放置的元素都可以放入层内。由于层可以放置在网页的任何位置，从而能有效地控制网页中的对象。层是在制作网页时经常用到的对象，元素的定位就是一个简单的应用。用表格来对网页进行排版非常方便，但有时需要在文字上放一些图片之类的元素，表格就不能胜任了，这时就可以利用图层来排版。图层可以重叠地放置，制作出层叠的效果。也可以控制层的显示或隐藏，实现交互技术。配合时间轴的使用，还可以同时移动一个或多个图层，轻松制作出动态效果。 4.2.2 图层的基本操作有关图层的基本操作包括创建图层、选择图层、激活图层、移动图层、复制图层、调整图层的大小、对其图层和设置图层的背景等。 1．插入图层在利用 Dreamweaver CS3 制作网页时，如果需要在网页中创建图层，可以执行一下操作之一：  将光标放置在文档窗口中需要插入层的位置，然后执行菜单“布局”→“绘制 AP Div” 命令。  打开插入“常用”面板，单击该面板上的插入图层图标，然后释放鼠标，鼠标会变 - 101 -.

(10) ▌▎网页制作基础教程 ▎▌. . 成“+”形状，用鼠标在页面中绘制一个矩形来创建层。如果需要绘制多个层，在单击绘制 AP Div 图标的同时按住 Ctrl 键，在文档窗口中绘制一个层，只要不释放 Ctrl 键，就可以连续画多个层。如图 4-9 所示。. 图 4-9. 插入图层. 创建完层后，在页面中会出现一个层标志，且有一个矩形的层出现。单击层标志，其“属性”面板中各项的含义如下：  层编号：用于设置层的名称，只能使用英文字母或数字。  左：指定层左边边框在文档中所处的位置，可以用像素、点、英寸、毫米、厘米等计量单位，系统默认的计量单位为像素。  上：指定层顶部边框与页面或上一级图层的距离。  宽和高：用于指定层的宽度和高度，如果层的内容超出指定的大小，则超出部分内容将自动被剪切掉。  Z 轴：在层重叠时使用，用于指定层的 Z 轴编号，Z 轴编号较大的层出现在编号较小的层的上面。  显示：用于控制层的初始显示状态。有四个选项：default 表示默认值，不指定层的可见属性；inherit 表示继承父图层的可见属性；visible 表示不考虑父图层的值，显示指定层的内容；hidden 表示不考虑父图层的值，隐藏指定层的内容。  背景图像：用于设置层的背景图像。  背景颜色：用于设置层的背景颜色。  标签：用于指定层使用的标记。  溢出：用于设置层的内容超出了它的大小后以何种方式显示，该选项仅适用与 CSS 层。  剪切：用于设置层中被剪切掉的范围， “左”、“右”、 “上”、“下”分别表示对层内容剪切后剩余的可见部分的左边界或右边界到层的左边框、上边界或下边界到层的上边框的距离。 2．创建嵌套图层图层嵌套是指在一个图层的内部创建另一个图层，可以用嵌套的方法将多个图层组合在一起。使用嵌套层的目的通常是为了将多个图层组成群组，这样一来，只要移动父层，其中的子层也会一起移动，而且子层还会继承父层的显示隐藏状态，其可见性与父层保持一致。这在网页制作动态网页时十分有用。创建嵌套层通常有以下 2 种方法：  直接创建嵌套层。先创建一个层为父层，然后在父层内创建的层称为子层。在图层面板中也可以看出层 2 是层 1 的子层。. - 102 -.

(11) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌ . 将已有的多个层变为嵌套层。打开“图层”面板，在层列表中将需要作为子层的层选中，按住 Ctrl 键将该层拖动到父层上，释放鼠标即可。. 4.2.3 选择图层 1．选择一个图层选择图层的目的是便于层的对齐、重定位和缩放，还可以为图层添加背景图像和背景颜色。在 Dreamweaver CS3 中要选择一个层，可以使用如下方法之一：  单击层标志。  单击层的任意边框线。  打开“图层”面板，单击该面板中需要选择的层的名称。选择层后，层的四周出现 8 个调控点，且层的标志反色显示。在“图层”面板中层以名称列表的形式显示，先创建的层位于图层面板的底部，最后创建的层位于“图层”面板的顶部。选择“图层”面板中的“防止重叠”复选框，可以防止层重叠；单击眼睛图标，图标是睁眼时，显示层可见，图标为闭眼时，显示层不可见；单击 Z 列需要改变层的数字，可以改变层的堆叠顺序，数字越大，该层在堆叠顺序中越往后移，反之亦然。 2．选择多个图层如果要同时选择多个图层后，可以按住 Shift 键，再执行上述操作之一。注意：当选择了多个图层后，最后选择的图层标记高亮显示，同时调控点显示为黑色，其他图层的调控点显示为白色。如图 4-10 所示。. 图 4-10. 选择多个图层. 4.2.4 激活图层如果需要在图层中插入对象，必须激活图层。把鼠标指针移动到层内的任何地方单击，即可激活该图层。此时，插入点位于图层内，被激活图层的边界突出显示，选中手柄也同时显示出来。注意：激活图层的操作不同于选择图层。 - 103 -.

(12) ▌▎网页制作基础教程 ▎▌. 4.2.5 移动图层移动图层的目的是改变图层的坐标位置，使图层中的内容可以在网页上任意移动。在文档中要移动一个图层，可以执行以下操作之一：  先选择层，然后在该层的选择手柄上按住鼠标左键并拖动，则可以移动层。  将鼠标指针移动到需要移动层的边框位置，当鼠标指针形状变为四个箭头时，按住鼠标左键并拖动，则可移动层。  在“属性”面板中直接设置“左”、“上”的数值，也可以移动层。  利用键盘，每按一次方向将，则移动一个像素单位；若在按 Shift 键时同时按一次方向键，则移动一个网格单位。注意：层“属性”面板中的“左”和“上”是以页面或父图层（嵌套层）左边和顶部的位置（0，0）为坐标起点的。如果同时选择多个层，在最后一个被选择层的手柄上按住鼠标左键并拖动来移动该层，则其他被选择的层也跟着移动。 4.2.6 调整图层的大小 1．调整单个图层的大小在文档中要调整一个图层的大小，可以执行如下操作之一：  拖拽层：选择层，拖拽图层的调控点。上下调控点只能调整层的高度，左右调控点只能调整层的宽度，四角的调控点能同时调整层的高度和宽度。  在层“属性”面板中设置“宽”和“高”的数值。  利用键盘来调整图层的大小。选择要调整的图层，按 Ctrl+方向键，每次调整一个像素单位。按 Ctrl+Shift+方向键，每次调整一个网格单位。 2．调整多个图层的大小在文档中要调整多个图层的大小，可以执行如下操作之一：  在设计视图中按 Shift 键选择多个图层，单击“修改”→“对齐”→“设成宽度相同” 或“设成高度相同”命令。  选择要调整的图层，打开其“属性”面板。在“属性”面板的多个层的“高”和“宽” 文本框中修改所有选中层的宽度值和高度值。注意：多个图层调整后的高度和宽度以最后一个被选中的图层的（黑色突出显示）宽度或高度为基准。 4.2.7 对齐图层文档窗口中有多个图层，可以选择这些图层，然后使用图层对齐命令使被选择的多个图层与最后被选择的图层边框对齐。对齐多个层的方法是在文档窗口中选中需要对齐的图层，执行“修改”→“对齐”命令，选择对齐方式中的一种：左对齐、右对齐、对齐上缘、对齐下院、设成宽度相同、设成高度相同。注意：在对齐图层时，没有选择的子图层会因为其父图层的移动而移动。 - 104 -.

(13) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 4.2.8 Dreamweaver CS3 中使用层的一些技巧（1）假如要嵌套层，决不要使用多重父层，应共享一个共同的单一父层。假如必须使用未在样式表中作完全限定的嵌套层，应在 Netscape 4.x 中做经常地检查。（2）总是将文本放在层中的一个表格里，表格应该是绝对大小（以像素为单位，而不是百分比）且不大于层，不过主表中的嵌套表可以设置为相对的百分比大小。这样做可以防止当窗口大小改变时，NC4xx 会重新调整文字到不可预期的位置。（3）决不放置层在表格中。Netscape 4.x 将不能正确地理解表格中的层。（4）总是使用 Netscape Resize Fix 这个插件于任何具有层或 CSS 样式的页面。（5）不要期望当浏览器窗口大小或屏幕分辨率发生变化后，绝对定位的层仍能保持与居中的表格或页面内容的对齐。有插件可用来动态地实现这个效果。（6）不要试图在层中放置滚动条（用 overflow 属性），使用一个 DHTML 滚动器或者 Project Seven IFRAME 技术来代替，对于 Netscape 4.x 用户，可以在 IFRAME 中设置一个特定的弹出页面。（7）决不给层和一幅图像相同的命名，每个层应该有自己唯一的并区别于页面中的其他元素的名字（事实上，不应该让两个具有相同名称的元素出现在同一个页面中）。（8）不要直接对层应用事件或行为。它们将不能跨浏览器地工作。应用它们到层中的内容（链接或图像）而不是层自身。 4.2.9 图层的管理图层的命名。在默认的情况下，Dreamweaver CS3 中创建的图层是以 Layer 开头的，如 Laryer1、Laryer2、Laryer3 等，依次命名。这样命名在处理图层时很容易混淆，因此要对每个图层进行命名。命名图层可以执行以下操作之一：  选择图层，在其“属性”面板的“层编号”文本框中输入图层名称。  打开“图层”面板。双击要命名图层的“名称”栏，使之处于可编辑状态，输入图层名称。改变图层的可见性。图层可以设置为显示或隐藏，用户可以通过层“属性”面板或“图层”面板来改变图层的可见性。 1．改变单个图层的可见性若要更改单个层的可见性，可以执行以下操作之一：  打开“图层”面板，单击“图层”面板中一个层的眼睛图标以更改其可见性。眼睛睁开表示该图层是可见的。眼睛闭合表示该层时不可见的。如果未指定可见性，则不会显示眼睛图标，表示“默认”可见性。默认情况下，所有图层都是可见的。  选择图层，在其“属性”面板的“显示”栏中设置图层的可见性。 2．改变所有图层的可见性若要同时更改所有图层的可见性，单击“图层”面板标题栏的眼睛图标，所有图层为可见或不可见。 - 105 -.

(14) ▌▎网页制作基础教程 ▎▌. 注意：改变所有图层的可见性时，可以将所有层设置为“可见”或“隐藏” ，但不能设置为“继承”。 3．改变图层的叠放次序用户可以通过层“属性”面板或“图层”面板来改变图层的叠放次序。  利用“图层”面板调整图层的叠放次序。打开“图层”面板，把光标放置到要改变位置的层的名称上，比如拖动 Layer3 到 Layer1 下面，释放鼠标，Layer3 便移动到最底端，Layer3 的 Z 值由 3 变成 1，而另外两个层的 Z 值都在原来值的基础上加 1，表示 Layer3 现在位于其他两个层的下面。  利用层“属性”面板调整图层的叠放次序。在“属性”面板中直接修改层的“Z 轴”值也可以改变层的叠放次序。可以在文本框中输入数值，当输入的数值比当前值大时，表示图层的叠放次序提高；当输入的数值比当前数值小时，表示图层的叠放次序降低。如果把 Layer3 重新放到 Layer1、Layer2 的上一层，则需要使“Z 轴”的值大于 3。 4.2.10 图层与表格图层和表格都可以用来进行页面定位，但图层是可以随意移动的，应用图层进行页面设计更快捷、方便、灵活。但图层只有在较高版本的浏览器（如 Internet Explorer 4.0 或 Netscape Navigator 4.0 及其更高的版本）中才能够正确显示，如果要使设计的网页在 3.0 版本的浏览器中也能正确显示，则不能使用图层来控制版面。为了避免显示错误，可以先用图层来快速创建复杂的页面布局，然后再把图层布局转换为表格布局，供不支持使用图层的浏览器浏览。需要时，也可以进行图层和表格的相互转换，以调整布局和优化页面设计。 4.2.11 将图层转换为表格在 Dreamweaver CS3 中，先用图层来制作一个页面，再选择“修改”→“转换”→“将 AP Div 转换为表格”命令，弹出“将 AP Div 转换为表格”对话框。如图 4-11 所示。. 图 4-11 “将 AP Div 转换为表格”对话框. 该对话框中各项的含义如下：  最精确：选择该项，则每一层建立一个表格单元，同时层之间的空隙也建立相应的单元格。 - 106 -.

(15) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 最小：合并空白单元。选择该项，当层之间的距离小于设定值时，则这些空隙不生成独立的单元格，它们被合并在较近的层生成的单元格中。  使用透明 GIFs：如果选择该项，则生成表格的最后一行用透明的 GIF 文件格式填充，这样在不同的浏览器中可以保持表格的外观一致。  置于页面中央：如果选择该项，则生成表格在文档窗口中居中放置。  防止重叠：如果选择该项，可以防止层重叠。  显示 AP 元素面板：如果选择该项，转换后可以显示“图层”面板。  显示网格：如果选择该项，转换后显示网格。  靠齐到网格：如果选择该项，启动吸附到网格功能。根据需要对以上各项进行设置，设置完毕单击“确定”按钮，即可把页面中的所有图层转换成表格。注意：  隐藏的图层不能转换为表格。  重叠的层不允许转换为表格，因为表格的单元格是不能重叠的。  在模板文档或已应用的文档中，不能将层转换为表格或将表格转换为层，即应该在非模板文档中创建布局，然后在将该文档另存为模板之前进行转换。 . 4.2.12 将表格转换为图层当对页面布局不满意时，必须进行调整。如果是使用表格布局的页面，调整时没有使用图层的页面灵活，这时可以将表格布局转换为图层布局，再进行调整。将表格转换为图层的步骤是：选择需要转换的表格，执行“修改”→“转换”→“将表格转换 AP Div”命令，弹出“转换表格为 AP Div”对话框；在对话框中选择所需要的选项（各项的含义同“转换 AP Div 为表格”对话框中的选项），单击“确定”按钮，选中的表格转换为层，但空表格单元不转换，表格之外的内容也被置于图层中。注意：如果文档应用了模板或模板文档，则不能把表格转换为图层。如果确实需要转换，可以在存为模板之前先进行转换。. 4.3. CSS 样式. CSS（即层叠样式表）是一种用于统一网页设计风格的技术，合理使用 CSS 不但能够减少设计代码，还能加快网页下载速度。本小节主要介绍 CSS 样式的基础知识，关于 CSS 样式的具体应用，将在以后章节中结合其他实例来介绍。 4.3.1 “CSS 样式”面板 “CSS 样式”面板主要用于创建、编辑和删除 CSS 样式，还可以将外部样式表附加到文档中来。选择“窗口”→“CSS 样式”命令，将打开“CSS 样式”面板。如图 4-12 所示。在“CSS 样式”面板中，可以查看与当前文档相关联的 CSS 样式及其层次结构。 “CSS 样式”面板可以显示自定义 CSS 样式、重定义的 HTML 标签和 CSS 选择器样式的规则定义。此外，创建和附加 CSS 样式表时，样式的名称和属性也会出现在“CSS 样式”面板中。 - 107 -.

(16) ▌▎网页制作基础教程 ▎▌. “CSS 样式”面板列出了所有样式标签中定义的所有选择器以及外部链接或导入的样式表。. 图 4-12. “CSS 样式”面板. 展开“CSS 样式”面板中的样式后，在上部将显示已定义的 CSS 样式的名称，下方则显示选择 CSS 样式的具体属性。 4.3.2 自动创建 CSS 样式 Dreamweaver 提供了多种创建 CSS 样式的方法，在进行网页属性设置、文本编辑等操作时会自动创建 CSS 样式。 1．页面属性设置利用页面属性设置网页属性时，实际上是同时应用了一种 CSS 内部文档头方式， Dreamweaver 会自动将“页面属性”设置生成一段 CSS 样式代码，置于代码的<head>与</head> 之间。下面通过一个实例来说明。（1）新建一个 HTML 文档，单击“页面属性”按钮，打开“页面属性”对话框，然后对页面的外观、链接、标题等类型的属性进行设置。如图 4-13 所示，设置完成后单击“确定” 按钮。. 图 4-13. “页面属性”对话框. （2）在文档编辑窗口中单击“代码”按钮，切换到“代码”视图，便可以看到对页面属性所进行的设置，变成了一段 CSS 样式代码。如图 4-14 所示。 2．文本编辑使用文本“属性”面板中的“样式”选项，可以对文字的字体、颜色、大小等样式进行快速设置，如图 4-15 所示。设置样式时，会自动将用户的设置记忆生成“Style 1”、“Style2” 等样式。下次重复使用时，只需要直接在“样式”列表中套用样式。 - 108 -.

(17) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 图 4-14 CSS 样式代码. 图 4-15. 样式“属性”面板. 4.3.3 创建新的 CSS 样式要创建新的 CSS 样式，需要使用“新建 CSS 规则”对话框，如图 4-16 所示。打开“新建 CSS 规则”对话框的方法有以下几种：  在“CSS 样式”面板中单击面板右下角区域中的“新建 CSS 规则”。  从主菜单中选择“窗口”→“CSS 样式”→“新建”命令。. 图 4-16. “新建 CSS 规则”对话框. CSS 样式包括“类”、“标签”、“高级”3 个选项。  “类”选项用于创建自定义 CSS 样式类，可以应用到页面的任何元素上。选择该选项时，需要在“名称”文本框中输入英文字母或句点开头的字母，否则将弹出警告提示。  “重定义标签”选项用于重新定义 HTML 标签的显示样式。选择该选项后， “名称” 文本框将变成“标签”下拉列表框，当需要重新定义页面元素的显示样式时只需要从下拉列表框中选择对应的元素标签即可。重定义标签后，以后使用该标签对应的元素都将显示定义样式。 - 109 -.

(18) ▌▎网页制作基础教程 ▎▌. “高级选择器”选项用于对具有唯一 ID 属性的元素以及关联选择器和伪类选择器进行格式化设置。其作用是同时定义多个元素或者限制某个样式只出现指定标签中。 ID 是标识页面元素的属性，在为页面元素命名时必须使用唯一的值。关联选择器是限制样式应用范围的一种设置，可以把自定义类、重定义标签和 ID 名称相互结合确定应用范围。伪类选择器是该高级选项的默认值，主要用来设置页面链接样式。 . 4.3.4 编辑 CSS 样式创建 CSS 样式后，可以使用“CSS 规则定义”对话框来进行编辑处理。如图 4-17 所示， “CSS 规则定义”对话框中提供的选项很多，应熟悉它们的含义和用法。 1．定义 CSS 类型在“CSS 规则定义”对话框中选择“类型”类别，可以利用选项来定义 CSS 样式的基本字体和类型设置。. 图 4-17. “CSS 规则定义”对话框. 字体：为样式设置字体。  大小：定义文本大小，可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。  样式：选择“正常”、“斜体”或“偏斜体”等选项，将其指定为字体样式，默认设置是“正常” ，  行高：设置文本所在行的高度。  修饰：向文本中添加下划线、上划线或删除线，或使文本闪烁。  粗细：对字体应用特定或相对的粗体量。 “正常”等于 400，“粗体”等于 700。  变量：设置文本的小型大写字母变量。  大小写：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。  颜色：设置文本颜色。 2．定义 CSS 样式背景属性在“CSS 规则定义”对话框中选择“背景”类别，可以利用选项定义 CSS 背景颜色。如 . - 110 -.

(19) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 图 4-18 所示。. 图 4-18. 定义 CSS 背景颜色. 背景颜色：设置元素的背景颜色。  背景图像：设置元素的背景图像。  重复：确定是否如何重复背景图像。  附件：确定背景图像是固定在它的原始位置还是随内容一起滚动。  水平位置和垂直位置：指定背景图像相对于元素的初始位置，可以用于背景图像与页面中心垂直和水平对齐。 3．定义 CSS 样式区块属性在“CSS 规则定义”对话框中选择“区块”类别，可以利用如图 4-19 所示的选项来定义标签和属性的间距和对齐设置。 . 图 4-19   . 定义 CSS 样式区块. 单词间距：设置单词的间距。字母间距：用于增大或减小字母或字符的间距。垂直对齐：用于指定应用它的元素的垂直对齐方式。仅当应用于<img>标签时， Dreamweaver 才在“文档”窗口中显示该属性。 - 111 -.

(20) ▌▎网页制作基础教程 ▎▌. 文本对齐：用于设置元素中的文本对齐方式。  文本缩进：用于指定第一行文本缩进的程度。可以使用负值创建凸出，但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver 才在“文档”窗口中显示该属性。  空格：用于确定如何处理元素中的空白。包括了“正常”、 “保留”和“不换行”3 个选项。选择“正常”表示收缩空白；选择“保留”表示保留所有空白，包括空格、制表符合回车；选择“不换行”表示仅当遇到 br 标签时文本才换行。  显示：用于指定是否以及如何显示元素。选择“无”时，将关闭它被指定给的元素的显示。 4．定义 CSS 样式方框属性在“CSS 规则定义”对话框中选择“方块”类别，可以利用如图 4-20 所示的选项为控制元素在页面上的放置方式的标签和属性定义设置。 . 图 4-20. 定义 CSS 样式方框. 宽和高：设置元素的宽度和高度。  浮动：设置其他元素（如文本、层、表格等）在哪个边围绕元素浮动。其他元素按通常的方式围绕在浮动的元素周围。  清除：定义不允许层的边。如果清除边上出现层，则带清除设置的元素移动到该层的下方。  填充：指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。取消选择“全部相同”选项可设置元素各个边的填充。选择“全部相同” ，将相同的填充属性设置为它应用于的元素的“上”、“右” 、“下”和“左”侧。  边界：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，Dreamweaver 才在“文档”窗口中显示该属性。取消选择“全部相同”可设置元素各个边的边距。选择“全部相同” ，将相同的边距属性设置为它应用于元素的“上”、 “右”、“下”和“左”侧。 5．定义 CSS 样式边框属性在“CSS 规则定义”对话框中选“边框”类别，可以利用如图 4-21 所示的选项定义元素 . - 112 -.

(21) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 周围的边框的设置（如宽度、颜色和样式）。. 图 4-21. 定义 CSS 样式边框. 样式：设置边框的样式外观，样式的显示方式取决于浏览器。Dreamweaver 在“文档” 窗口中将所有样式呈现为实线。取消选择“全部相同”可设置元素各个边的边框样式。选择“全部相同”，将相同的边框样式属性设置为它应用于的元素的“上” 、 “右”、 “下”和“左”侧。  宽度：设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”可设置元素各个边的边框宽度。选择“全部相同”，将相同的边框宽度设置为它应用于的元素的“上” 、“右”、 “下”和“左”侧。  颜色：设置边框的颜色。可以分别设置每个边的颜色，但显示取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。选择“全部相同”，将相同的边框颜色设置为它应用于的元素的“上”、“右”、“下”和“左”侧。 6．定义 CSS 样式列表属性在“CSS 规则定义”对话框中选“列表”类别，可以利用如图 4-22 所示的选项为列表标签定义列表设置（如项目符号大小和类型）。 . 图 4-22. 定义 CSS 样式列表 - 113 -.

(22) ▌▎网页制作基础教程 ▎▌. 类型：设置项目符号或编号的外观。  项目符号图像：可以为项目符号指定自定义图像。单击“浏览”按钮，通过浏览器选择图像，或键入图像的路径。  位置：设置列表项文本是否换行或缩进（外部）以及文本是否换行到左边距（内部）。 7．定义 CSS 样式定位属性在“CSS 规则定义”对话框中选择“定位”类别，可以利用如图 4-23 所示的选项为样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。 . 图 4-23 . .  . 定义 CSS 样式定位. “类型”选项。“类型”选项用于确定浏览器应如何来定位层，其中提供了以下 3 个选项：  绝对：使用“定位”框中输入坐标（相对于页面左上角）来放置层。  相对：使用“定位”框中输入坐标（相对于对象在文档的文本中的位置）来放置层。该选项不显示在“文档”窗口中。  静态：将层放在它在文本中的位置。 “显示”选项。“显示”选项显示用于确定层的初始显示条件。如果不指定可见性属性，则默认情况下大多数浏览器都继承父级的值。包括以下 3 个选项：  继承：继承父级的可见性属性。如果层没有父级，则它将是可见的。  可见：显示该层的内容，而不管父级的值是什么。  隐藏：隐藏这些层的内容，而不管父级的值是什么。 Z 轴。Z 轴用于确定层的堆叠顺序。编号较高的层显示在编号较低的层的上面。值可以为正，也可以为负。溢出。溢出仅限于 CSS 层，确定在层的内容超出它的大小时发生的情况。这些属性控制如何处理此扩展，包括以下 4 个选项：  可见：增加层的大小，使它的所有内容均可见。层向右下方扩展。  隐藏：保持层的大小并剪辑任何超出的内容。不提供任何滚动条。  滚动：在层中添加滚动条，不论内容是否超出层的大小。专门提供滚动条可避. - 114 -.

(23) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 免滚动条在动态环境中出现和消失所引起的混乱。  自动：是滚动条仅在层的内容超出它的边界时才出现。该选项不显示在“文档” 窗口中。  定位。定位指定层的位置和大小。浏览器如何解释位置取决于“类型”设置。如果层的内容超出指定的大小，则大小值被覆盖。位置和大小的默认单位是像素。对于 CSS 层，还可以指定到下列单位：pc（十二点活字）、 pt（点）、in（英寸）、mm（毫米）、（ems）、（exs）或%（父级值的百分比）。缩写必须紧跟在值之后，中间不能留空格：例如，3mm。  剪辑。剪辑用于定义层的可见部分。如果指定了剪辑区域，可以通过脚本语言（如 JavaScript）访问它，并操作属性以创建像擦除这样的特殊效果。通过“改变属性” 行为可以设置这些擦除效果。 8．定义 CSS 样式扩展属性在“CSS 规则定义”对话框中选“扩展”类别，如图 4-24 所示。可以利用其中的选项定义扩展样式属性，如过滤、分页和指针等选项。. 图 4-24   . 定义 CSS 样式扩展. 分页：在打印期间在样式所控制的对象之前或者之后强行分页。选择要在弹出式菜单中设置的选项。光标：当指针位于样式所控制的对象上时改变指针图像。选择要在弹出菜单中设置的选项。滤镜：对样式所控制的对象应用特殊效果（包括模糊和反转）。. 4.3.5 链接到外部 CSS 样式表在编辑处理外部的 CSS 样式表时，链接到该 CSS 样式表的所有文档都将更新以反映所做的编辑。可以导出文档中包含的 CSS 样式，以创建新的 CSS 样式表，然后附加或链接到外部样式表以应用那里所包含的样式。链接或导出外部 CSS 样式表的方法如下：（1）打开“CSS 样式”面板，单击其中的“附加样式表”图标，将出现“链接外部样式表”对话框。. - 115 -.

(24) ▌▎网页制作基础教程 ▎▌. （2）在“附加外部样式表”对话框中单击“浏览”按钮，浏览到外部 CSS 样式表，选择外部样式表文件，或者在“文件/URL”文本框中输入样式表的路径。（3）单击“预览”按钮，确认样式表是否将所需的样式应用于当前页面。（4）如果应用的样式没有达到预期效果，单击“取消”按钮，删除该样式表。页面将恢复到原来的外观，如果满意，则单击“确定”按钮，完成到外部样式表的链接。在“链接外部样式表”对话框中，还有一个“范例样式表”的链接，单击此链接，会出现“范例样式表”对话框，在该对话框中，提供了大量的外部 CSS 样式表，可以选择一个自己需要的作为外部 CSS 链接。. 4.4. 使用行为. 使用行为，可以响应鼠标或键盘的一些动作，从而实现一些网页特效。 4.4.1 行为基础 “行为”是事件和动作的结合，行为被规定附属于用户页面上的某个特定的元素，可以是一个文本链接、一个图像或者<body>标识。 “行为”实质上就是是网页上的一段用于实现访问者与 Web 页交互的 JavaScript 代码。使用“行为”面板可以指定动作及触发该动作的事件，从而将“行为”添加到页面中。 1．事件 “事件”可以是任何与使用者在一个链接上单击同样具有交互性的事物，或与一个 Web 页的载入过程同样自动化的某件事情。实际上，客户端脚本程序要处理的内容就是操作 Web 页上的各种对象，并通过响应各种事件（如鼠标单击、鼠标移动、按下键盘按键等）来提供一种表现力丰富的、具有交互功能的用户界面。比如，将鼠标指针移动到某个链接上时，浏览器便为该链接生成一个 onMouseOver（鼠标经过）事件，然后浏览器查看是否存在当为该链接生成该事件时浏览器应该调用的 JavaScript 代码，不同的页元素定义了不同的事件。每个浏览器都提供了一组事件，这些事件可以与“行为”面板的“添加动作”按钮“+” 下拉菜单中列出的动作相关联。当用户进行单击按钮等操作时，即产生了一个事件，需要浏览器进行处理。浏览器响应事件并进行处理的过程称为事件处理，进行这种的代码称为“事件响应函数” 。通常浏览器会默认定义一些通用的事件处理，以便响应那些最基本的事件。例如，单击超链接的默认响应就是装入并显示目标页面，单击表单中的提交按钮默认响应就是将表单提交到服务器等。 2．动作 “动作”是由预先编写的 JavaScript 代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播放声音或停止 Macromedia Shockwave 影片。Dreamweaver CS3 自身提供的一些动作由 Dreamweaver 工程师精心编写的，提供了最大的跨浏览器兼容性。浏览器与服务器一个完整的上下交互行程都可以理解成一个动作。 3．事件与动作的关系在将行为附加到页元素之后，只有对该元素发生了所指定的事件，浏览器就会调用与该事件关联的动作（JavaScript 代码）。例如，如果将“播放声音”动作附加到某个链接并指定它 - 116 -.

(25) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 将由 onMouseOver 事件触发，那么只要某人在浏览器中用鼠标指针指向该链接，就将播放设置的声音文件。一个单独的事件可以触发多个动作，用户不会在向单个事件中附加多个相同动作的实体时受到限制。这些动作发生的顺序可以被指定。 Dreamweaver CS3 带有 20 多个跨越浏览器兼容的动作，同时第三方开发者已经开发出许多附加的可用的动作，还有更多正在开发当中的。行为极大地扩展了现代 Web 设计者可以做到的能力范围，而不用学习如何编写 JavaScript 程序。 4.4.2 行为面板利用“行为”面板可以在 Dreamweaver CS3 中轻松设计出相对应的 JavaScript 代码，当选择了一个动作，并结束了相应的对话框操作后，默认的事件就出现“事件”窗格中，所选择的动作出现在“动作”窗格中。通过单击默认事件旁边的向下箭头，可以选择不同的事件。双击相应的动作，打开相关的参数窗口，可以修改动作的属性。利用“行为”面板可在网页上实现一系列在客户端发生的行为动作。可在菜单栏中选择“窗口”→“行为”命令或使用快捷键 F8 键打开“行为”面板，如图 4-25 所示，在该面板上主要包括“显示设置事件”、 “显示所有事件”、“添加动作”、“删除动作”、“向上移动”、“向下移动”六个按钮，现将其主要功能和使用方法介绍如下：  显示设置事件：仅显示附加到当前文档的那些事件。事件被分别划归到客户端或服务器端类别中。每个类别的事件都包含一个可以折叠的列表中，可以单击类别名称旁边的加号或减号按钮展开或折叠该列表。 “显示设置事件”是默认的视图，如图 4-26 所示，是一个网页上存在三个设置事件在“行为”面板中的显示效果。. 图 4-25  .  . “行为”面板. 图 4-26. 网页上存在的三个设置事件. 显示所有事件：单击“显示所有事件” ，会在“行为”面板中按字母降序显示给定类别的所有事件，当然也包括在网页中已经设置的事件，如图 4-27 所示。添加动作“+”：单击“添加动作”图标会出现一个“添加动作”菜单，如图 4-28 所示，其中包含可以附加到当前所选元素的动作。当从该列表中选择一个动作时，将出现一个对话框，在该对话框中可以指定该动作的参数。如果所有动作都灰显，则没有所选元素可以生成的事件。删除动作“-”：单击“删除动作”图标可以从行为列表中删除所选的事件和动作。上下箭头图标：将特定事件的所选动作在行为列表中向上或向下移动。给定事件的 - 117 -.

(26) ▌▎网页制作基础教程 ▎▌. 动作是以特定的顺序指定的。. 图 4-27 . . 显示所有事件. 图 4-28. “添加动作”菜单. 行为类表框：页面上添加的行为会显示在行为列表中，当单击行为列表框中所选事件名称旁边的箭头按钮时，会出现一个下拉列表菜单，其中包括可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。显示事件：“显示事件”指“添加行为”菜单中的子菜单，指定当前行为应该在其中作用的浏览器。在此菜单中进行的选择确定哪些事件将显示在“事件”出现菜单中。. 4.4.3 行为操作通过“行为”面板上的“添加行为”菜单，可以将行为附加到整个文档，也可以附加到链接、图像、表单元素或多种其他 HTML 元素的任何一种。 Dreamweaver CS3 自带的行为动作非常丰富，能够满足多数人制作网页时对这些行为的需要，以下是 Dreamweaver CS3 自带的一些行为：  调用 JavaScript。  改变属性。  检查浏览器。  检查插件。  控制 Shockwave 或 Flash。  设置文本。  拖动层。  转到 URL。  打开浏览器窗口。  出现信息。  预先载入图像。  显示/隐藏层。. - 118 -.

(27) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 交换图像。  设置导航条图像。  检查表单。 1．“调用 JavaScript”行为用户如果觉得 Dreamweaver 内部集成的可供调用的 JavaScript 不能适合自己的需要，则可以使用“调用 JavaScript”动作自己编写 JavaScript 或使用 Web 上多个免费的 JavaScript 库中提供的代码。 “调用 JavaScript”动作允许使用“行为“面板指定当发生某个事件时应该执行的自定义函数或 JavaScript 代码行。 “调用 JavaScript”的基本操作方法如下：（1）在编辑窗口中选择用于触发动作的对象。（2）在“行为”面板中单击“添加动作”按钮，选择“调用 JavaScript”动作。（3）在“调用 JavaScript”对话框中输入 JavaScript 代码或函数名称到文本框中。（4）单击“确定”按钮。 2．“改变属性”行为使用“改变属性”动作可以更改对象某个属性的值。基本操作方法如下：（1）选择用来触发动作的对象。（2）在“行为”面板中单击“添加动作”按钮，在出现的菜单中选择“更改属性”动作，出现“改变属性”对话框，如图 4-29 所示，根据需要对该对话框进行设置。 . 图 4-29. “改变属性”对话框. （3）在“元素类型”下拉列表中选择一种对象类型。（4）在“元素”下拉列表中选择想要的页面对象。（5）在“属性”栏的“选择”右侧较远处的下拉列表中选择目标浏览器，然后选择要改变的属性。（6）在“新的值”文本框中输入当事件发生时被插入的属性的新值。（7）“改变属性”对话框设置完成后，单击“确定”按钮。（8）检查“行为”面板中默认事件是否是所需要的事件。如果不是，从出现菜单中选择另一个事件，如果未列出所需要的事件，则在“显示事件”出现菜单中更改目标浏览器。 3．“打开浏览器”行为使用“打开浏览器”动作可根据访问者不同类型和版本的浏览器将它们转到不同的页。基本操作如下：（1）选择触发该动作的对象。 - 119 -.

(28) ▌▎网页制作基础教程 ▎▌. （2）在“行为”面板中单击“添加行为”按钮，从出现的菜单中选择“打开浏览器窗口” 动作，出现“打开浏览器窗口”对话框，如图 4-30 所示，可根据需要对此进行必要设置。. 图 4-30. “打开浏览器窗口”对话框. （3）指定 Netscape navigator 和 Internet explorer 版本，以及用户是否希望浏览器停留当前的页面上，转到其他的 URL 或者进入第三个可选择的 URL。（4）为所有其他的浏览器设置相同的选项。（5）在各自的文本框中输入 URL 和第二个可选的 URL 选项，或者选择“浏览”按钮来定位相应的文件。（6）完成设置后单击“确定”按钮。（7）检查“行为”面板中默认事件是否是所需要的事件。如果不是，从出现菜单中选择另一个事件。 4．检查插件 “检查插件”动作可根据访问者是否安装了指定的插件这一情况将它们转到不同的页。基本操作如下：（1）选择用于触发动作的对象。（2）在“行为”面板中单击“添加行为”按钮，从出现的菜单中选择“检查插件”动作，出现“检查插件”对话框，根据需要对该对话框进行设置。如图 4-31 所示。. 图 4-31. “检查插件”对话框. （3）在“检查插件”对话框“插件”旁的“选择”下拉列表中选择一个插件，用户也可以在“输入”文本框中输入其他的插件名称。（4）如果用户希望将正使用相应插件的使用者发到不同的页面上，那么在“如果有，转到 URL”文本框中输入待定的 URL，或者使用“浏览”按钮来定位文件。同样，要让不具有 - 120 -.

(29) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 该插件的访问者留在同一页上，则不需要选择此项。（5）在“否则，转到 URL”文本框中，输入为没有插件的使用者所准备的 URL。（6）“检查插件”对话框设置完成后，单击“确定”按钮。（7）检查“行为”面板中默认事件是否是所需要的事件。如果不是，从出现菜单中选择另一个事件。 5．拖动层 “拖动层”动作允许访问者拖动层。使用此动作创建拼版游戏、滑块控件或其他可移动的界面元素。基本操作如下：（1）在“文档”窗口底部标签选择中选择<body>标签。（2）在“行为”面板中单击“添加行为”按钮，从出现的菜单中选择“拖动 AP 元素” 命令。（3）弹出的“拖动 AP 元素”对话框如图 4-32 所示，该对话框包括“基本”与“高级” 两个选项，默认状态为“基本”选项设置状态，根据需要对该对话框进行设置。. 图 4-32. “拖动 AP 元素”对话框. （4）在“层”下拉列表中选择希望被移动的层。（5）限制层的移动，在“移动”下拉菜单中选择“限制”选项，出现“上”、 “下”、 “左” 、 “右”四个文本框。（6）要设置被拖动对象的位置，在“放下目标”中的“左”和“上”文本框中输入坐标。（7）要围绕层被放置到的目标坐标来设置一个对齐区域，如果在目标位置释放，那么可以在“靠齐距离”文本框中输入一个像素值。（8）对于附加的选项，可以单击“高级”选项卡。（9）如果用户希望限制拖动操作所使用的区域，可以选择“拖动控制点”下拉菜单中的 “层内区域”选项。（10）要控制被拖动层的位置，可以设置下面列出的“拖动时”选项。（11）在拖动层的同时，要执行 JavaScript 命令，在“呼叫 JavaScript”文本框中输入命令或函数名称。（12）要在释放层的同时执行一个 JavaScript 命令，在“放下时，呼叫 JavaScript”文本框中输入代码。（13）“拖动 AP 元素”对话框设置完成后，单击“确定”按钮。（14）检查“行为”面板中默认事件是否是所需要的事件。如果不是，从出现菜单中选择另一个事件。 - 121 -.

(30) ▌▎网页制作基础教程 ▎▌. 6．打开浏览器窗口使用“打开浏览器窗口”行为，可以在一个新的窗口中打开网页，并且可以指定新窗口的属性（包括其大小）、特性（它是否可以调节大小，是否具有菜单栏等）和名称。基本操作如下：（1）选择用来触发工作的对象（2）在“行为”面板中单击“添加行为”按钮，从出现的菜单中选择“打开浏览器窗口” 命令，出现“打开浏览器”对话框，如图 4-33 所示，根据需要对该对话框进行设置。. 图 4-33. “打开浏览器”窗口. （3）“打开浏览器窗口”对话框设置完成后，单击“确定”按钮。（4）检查“行为”面板中默认事件是否是所需的事件。如果不是，从出现菜单中选择另一个事件。 7．预先载入图像 “预先载入图像”动作将不会立即出现在页上的图像载入浏览器缓存中，这样可以防止当图像应该出现时由于下载而导致延迟。使用“预先载入图像”动作的基本操作如下：（1）选择用来触发动作的对象。（2）在“行为”面板中单击“添加行为”按钮，从出现的菜单中选择“预先载入图像” 命令，随后出现“预先载入图像”对话框，如图 4-34 所示。. 图 4-34. “预先载入图像”对话框. （3）在“预先载入图像”对话框中单击“浏览”按钮，选择要预先载入的图像文件，或在“图像源文件”文本框中输入图像的路径和文件名。（4）单击该对话框顶部的加号“+”按钮，将图像添加到“预先载入图像”列表中。对所有剩下的要预先载入当前页的图像重复第 3 步和第 4 步的操作。如果要从“预先载 - 122 -.

(31) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 入图像”列表中删除某个图像，则在列表中选择该图像，然后单击减号“-”按钮。（5）“预先载入图像”对话框设置完成后，单击“确定”按钮。（6）检查“行为”面板中默认事件是否是所需事件。如果不是，从出现菜单中选择另一个事件。 8．设置框架文本 “设置框架文本”动作可以动态设置框架的文本，用指定的内容替换框架的内容和格式设置。使用“设置框架文本”动作的操作如下：（1）选择用来触发的动作对象。（2）在“行为”面板中单击“添加行为”按钮，从出现的菜单中选择“设置文本”→“设置框架文本”命令，随后出现“设置框架文本”对话框。（3）在“设置框架文本”对话框的“框架”下拉列表中选择目标框架。（4）在“新建 HTML”文本框中输入文本。（5）单击“获取当前 HTML”按钮，复制当前目标框架的<body>部分的内容。（6）“设置框架文本”对话框设置完成后，单击“确定”按钮。（7）检查“行为”面板中默认事件是否是所需事件。如果不是，从出现菜单中选择另一个事件。 9．设置状态栏文本 “设置状态栏文本”动作将在浏览器窗口底部左侧的状态栏中显示消息。使用“设置状态栏文本”动作的基本操作如下：（1）选择用来触发的对象。（2）在“行为”面板中单击“添加行为”按钮，从出现的菜单中选择“设置文本”→“设置状态栏文本”命令，随后出现“设置状态栏文本”对话框。如图 4-35 所示。. 图 4-35. “设置状态栏文本”对话框. （3）在“设置状态栏文本”对话框的“消息”文本框中输入文本。（4）“设置状态栏文本”对话框设置完成后，单击“确定”按钮。（5）检查“行为”面板中默认事件是否是所需事件。如果不是，从出现菜单中选择另一个事件。 10．设置文本域文本 “设置文本域文本”动作可以用指定的内容替换表单文本域的内容。使用“设置文本域文本”动作的基本操作如下：（1）选择用来触发动作的对象。（2）在“行为”面板中单击“添加行为”按钮，并从出现的菜单中选择“设置文本”→ “设置文本域文本”命令，随后出现“设置文本域文本”对话框。 - 123 -.

(32) ▌▎网页制作基础教程 ▎▌. （3）在“设置文本域文本”对话框的“文本域”的下拉列表中选择目标文本域。（4）在“新建文本”文本框中输入文本。（5）“设置文本域文本”对话框设置完成后，单击“确定”按钮。（6）检查“行为”面板中默认事件是否是所需事件。如果不是，从出现菜单中选择另一个事件。 11．检查表单 “检查表单”行为用于检查指定文本域的内容，以确保用户输入了正确的数据类型，防止表单提交到服务器后存在任何指定的文本域包含无效的数据。使用“检查表单”动作的基本操作如下：（1）选择用来触发动作的对象。（2）在“行为”面板中单击“添加行为”按钮，并从出现的菜单中选择“检查表单”命令，随后出现“检查表单”对话框，如图 4-36 所示，该对话框各选项可根据需要进行设置。. 图 4-36. “检查表单”对话框. （3）如果要验证整个表单，可以在“域”列表中选择一个文本域。如果想要验证单个区域，那么选取所需要的表单对象，然后该对象将出现在“域”列表中。（4）要使用某个域成为必需的域，选中“必需的”复选框。（5）要设置所期望的输入种类，可在“可接受”选项中选择一个。（6）如果需要检查多个域，对要检查的任何其他域重复第 3 步至第 5 步即可。（7）“检查表单”对话框设置完成后，单击“确定”按钮。（8）如果在用户提交表单时检查多个域，则 onSubmit 事件自动出现在“事件”出现菜单中。如果要分别检查各个域，则检查默认事件是否是 onBlur 或 onChange，如果不是，则重新选择 onBlur 或 onChange。. 4.5. 使用模板. 模板是一种用于设计统一风格页面布局的特殊类型的文档。使用模板既能快速创建网站而且还能使各个网页的风格保持一致。 4.5.1 模板基础网站风格是设计网站的重要原则之一，网站的所有页面应体现同一风格。Dreamweaver - 124 -.

(33) ▌▎第 4 章 Dreamweaver CS3 高级篇 ▎▌. 的模板便是用于控制网站风格的利器，模板可以保持所有页面的共性，以帮助网页设计师用最短的时间来完成繁重的网站维护工作。比如，一个网站的大多数网页都要求其版面风格相似，其标题、导航条完全相同，只是正文部分不同，只需要创建一个模板，就可以将网页中无需变化的对象固定下来，然后再用来应用到其他风格类似的网页中。显然，只需修改页面的部分内容，就能快速制作出各个页面。模板在本质上是一个独立的网页文件，创建模板时应把握好以下两个要领：（1）要从全局考虑：在创建模板前，需要先定义好站点框架，明确整个站点所需要的不同的版式，每个模板需要定义的可编辑区域。（2）要注意与程序的整合：大多数商业站点都含有数据库程序，在创建模板时就应考虑程序代码在模板中的位置和安全性。 4.5.2 创建新模板在创建 Dreamweaver 模板时，会自动锁定文档的大部分区域。因此，需要指定基于模板的文档中的哪些区域可以编辑。需要注意的是，创建模板的过程中，可编辑区域和锁定区域都可以更改。但在基于模板的文档中，模板用户只能在可编辑区域中进行更改，无法修改锁定区域。 1．使用菜单创建模板既可以以现有文档为基准创建模板，也可以从新建的空白文档中创建模板，具体创建方法如下：（1）新建一个网页或打开要另存为模板的文档。（2）选择“文件”→“另存为模板”命令，出现“另存为模板”对话框。（3）从“站点”下拉菜单中选择一个用来保存模板站点，并在“另存为”文本框中为模板输入一个唯一的名称。（4）单击保存按钮，Dreamweaver 将模板文件保存在站点的本地根文件夹中的 templates 文件夹中，使用文件扩展名.dwt。如果该 templates 文件夹在站点中不存在，则 Dreamweaver 在保存新建模板时自动创建该文件夹。 2．使用“资源”面板创建新模板（1）选择“资源”面板左侧的“模板”类型，即会显示“资源”面板的“模板”类别。（2）单击“资源”面板底部的“新建模板”图标。（3）一个新添加的面板名称出现在“资源”面板的模板列表中。（4）在模板仍处于选定状态时，输入模板的名称，然后按 Enter 键。（5）Dreamweaver 即在“资源”面板和 templates 文件夹中创建一个新的空模板。 4.5.3 设置面板可编辑区可编辑模板区域的创建，也就意味着可以在基于模板制作的网页的特定区域中编辑文档。 1．插入可编辑区域在插入可编辑区域之前，确保编辑的是新模板文件，否则普通网页文档中插入一个可编辑区域，Dreamweaver 会提示该文档将自动另存为模板。可编辑区域可以放在页面中的任何位 - 125 -.