管理信息化 EAM 资产管理用
DreamWeaver 打造留言板全
●Dreamweaver4 工作区是一种与 Dreamweaver4 中所用布局相类似的工作区布局，其中每个
文档都位于自己的独立浮动窗口中。面板组停靠在一起，但并不是停靠在一个更大的应用程
序窗口中。仅建议喜欢使用更熟悉的工作区的 Dreamweaver4用户使用这种布局。
▲教程副页：DreamweaverMX工作环境简介页面
二、建立第一个站点（无服务器端脚本的普通静态站点）
下面我们建立一个没有服务器端脚本的普通静态站点，具体建立步骤如下：
1、选择“站点/新建站点”。（即从“站点”菜单中选择“新建站点”命令。）即会出现“站
点定义”对话框。
2、如果对话框显示的是“高级”选项卡，则单击“基本”。出现“站点定义向导”的第一
个屏幕，要求您为站点输入一个名称。
3、在文本框中，输入一个名称以在 Dreamweaver 中标识该站点。该名称可以是任何所需的
名称。例如，您可以将站点命名为“mysit”。
如图 2所示。
图 2建站向导——站点起名
4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技
术。选择“否”选项指示目前该站点是一个静态站点，没有动态页。如图 3所示。
图 3建站向导——静态和动态网站选择
5、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您要如何使用您的文件，
如图 4所示。
●选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。
●文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver 将在其中存储站点文件的本地
版本。若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请
单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框，在对话
框中浏览到本地磁盘上可以存放所有站点的文件夹。然后单击“确定”。
图 4建站向导——定义站点文件的存储位置
6、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您如何连接到远程服务
器。从弹出式菜单中选择“无”。
▲如果你有远程的 FTP服务器空间，在这一步骤可以按照如图 5所示进行连接到远程服务器
的设置。
图 5建站向导——连接到远程服务器的设置
7、单击“下一步”进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。
单击“完成”完成设置。
▲完成站点的建立之后，在文件面板中你会看到如图 6所示的类似结果（本地视图）。
图 6文件面板中的本地视图
三、用系统模板创建站点的第一个页面
上面我们利用建站向导创建了一个站点，下面我们在这个站点中创建一个页面。先查看这个
页面的效果：lesson1_
这个页面是用 DreamweaverMX的系统模板创建的，以下是创建步骤：
1、执行“文件/新建”命令，弹出“新建文档对话框”。在此对话框中选择“常规/页面设
计/文本：文章 C”，然后单击“创建”按钮，如图 7是示意图。
图 7利用模板创建新文档示意图
2、现在我们在页面编辑区得到一个新页面，并且页面中已包含了一些模板内容。这个页面
很简单，包括一些文本和一个图像。
我们首先将那些英文文本换成一些中文文本（你可以将教程中示例页面中的文本复制过
来）。
3、对图像进行处理。我们在页面中看到的是一个图像占位符，下面我们要用一个具体的图
像替换它。单击这个图像占位符，并展开相应的占位符属性面板，如图 8所示。
●如果图像已经创建好，就在占位符属性面板中的源文件处进行设置。
●如果图像还没有创建，就单击占位符属性面板中的创建按钮，在 FireworksMX中创建。
图 8占位符属性面板
4、在属性面板中设置文本的属性，由于我们的页面上的文本实际上都是在表格中，所以实
际上是设置表格的单元格属性，如图 9所示。
图 9单元格属性面板
5、关于图像和文本的距离的设置。我们以后在编辑网页时会经常遇到图像和文本之间的距
离问题，如图 10 所示。我们可以先选中图像，然后在图像属性面板中设置图像和文本之间
的距离，如图 11所示。
图 10图像和文本间的距离示意图图 11设置图像和文本距离
6、保存文件。执行“文件/保存”命令，将文档保存到我们站点文件夹中。
如果我们文件的存储路径是:c:\Inetpub\wwwroot\mysite1\lesson1_，则可以在浏览器中用
以下地址访问它：localhostlesson1_或者 _。
第二课
经过上一课的学习，我们对 DreamweaverMX的工作环境以及如何创建一个站点和编辑页面文
档有了一个初步的认识。从这次课开始我们要系统的来学习如何创建一个留言板站点。通过
这个留言板站点的建立，我们要讨论在 DreamweaverMX中经常用到的一些工具和命令。
一、创建留言板动态站点
上一次课我们建立了一个静态的站点，这一课我们首先建立一个包含服务器端脚本（ASP）
的动态站点。以下是创建步骤：
1、执行“站点/新建站点”命令，得到建站向导，在第 1步中，给你的站点起个名字。比如
是：liuyanban。
2、单击下一步，在下一个步骤画面中进行服务器脚本技术的有关设置，如图 1所示。
图 1建站向导——服务器脚本技术设置
3、单击下一步，进入到建站向导的下一个画面，这个步骤是关于站点的 URL的内容，如图 2
所示。
图 2建站向导——站点 URL
4、以下步骤按照建站向导的默认设置。最后单击完成按钮即可。
二、在站点中创建资源文件夹
▲在创建了本地站点之后，如果您已为该站点创建了资源（图像、Flash 动画或其他内容片
断），则将这些资源放置在本地站点根文件夹内的一个文件夹中。那么当您要向页中添加内
容时，这些资源将随时可用。
现在我们就在留言板站点根文件夹中创建新文件夹，并把相应的资源文件复制到资源文件夹
中。
1、假设我们的留言板站点的根文件夹路径为：c:\Inetpub\wwwroot\liuyanban\。
2、打开站点面板，展示留言板站点的本地视图，右键单击留言板站点，在弹出的快捷菜单
中执行“新建文件夹”命令。如图 3所示。
按照这种方法，先创建两个文件夹：images（用来放图像文件）和 swf（用来放 Flash 动
画）。
图 3在站点视图创建新文件夹
▲请下载以下资源，并把它们放在相应的文件夹中。在站点面板中可以象资源管理器一样管
理文件和文件夹。
●留言板系统用户头像图像(10个图像文件)。放在 images文件夹中。下载（rar文件）
●留言板系统导航条图像。放在 images文件夹中。下载
●Flash 动画文件(1个)。放在 swf文件夹中。下载
按照上面的步骤把站点中的资源文件部署好以后，在资源面板中就可以看到我们部署好的相
应的资源，如图 4所示。我们可以将资源面板中的资源直接拖放到站点文档中使用。
图 4资源面板
三、创建留言板站点的第一个页面（文件名：）
下面我们创建留言板站点的第一个页面，这个页面是个普通的不包含服务器脚本的静态页面。
它用来对我们的留言板系统进行说明。
1、执行“文件/新建”命令，在弹出的新建文档对话框中选择“基本页/”，然后单击“创
建”按钮，如图 5所示。
图 5新建基本文档
2、编辑页面文档（页面效果参考）
●输入页面标题“留言板系统说明”。如图 6所示。
图 6定义页面标题
●输入页面文字内容并定义它们的字体、颜色等属性。具体的属性设置可以在属性面板中实
现。
●关于连续空格的输入：执行“编辑/参数选择”命令，在弹出的参数选择对话框中选择“允
许多个连续空格”复选框，如图 7所示。
图 7参数选择——允许多个连续空格
●对于中文用户来说，我们习惯于中文的段落格式，比如段前空两格。可以这样实现：将中
文输入法切换到“全角”方式，然后连续按两次空格，完了以后再切换到“半角”方式进行
文字内容的输入。
●关于段落：每按一次 Enter（回车）键就代表一个新段落的开始。如果你想在段落中换行，
请按“Shift+Enter”组合键。
●关于图像的插入，我们可以用以下两种方法中的任意一种：
①将光标定位到要插入图像的位置。用鼠标单击“插入栏”中“常用”标签下的图像按钮，
如图 8所示。然后找到要插入的图像文件。
图 8插入图像和水平线
②打开资源面板，单击图像资源类别，选择要插入的具体图像资源，用鼠标拖放到插入处。
●关于水平线的插入，如图 8所示。我们还可以在属性面板设置它的简单属性，但不能直接
在属性面板设置它的颜色。
插入的水平线默认是灰色的，要更改它的颜色，我们需要这样操作：
选中水平线，切换到代码视图。将光标定位在 br 标签后，单击空格键，这时会弹出一个下
拉菜单，如同 9所示，我们再在其中双击 color属性标签，这样就会弹出调色板，在其中选
择你需要的颜色就可以了。
图 9在代码视图设置水平线颜色属性
3、保存页面文档。执行“文件/保存”命令，把文档保存到站点的根目录下。文件名：。只
须输入主文件名 shuoming就可以了，扩展名是系统自动加上的。
第三课
本次课开始我们要设计留言板的主页面了。复杂的页面一般都要先用表格布局，我们就从留
言板主页面的表格布局开始学习。除了表格布局，利用层布局页面也是一种选择。但层的兼
容性和可控制性就比表格差多了，本次课也要讨论 DreamweaverMX中有关层布局，以及层和
表格相互转换的知识。
首先让我们先看看留言板站点主页面将来大概是个什么摸样。单击这里打开页面效果，具体
设计步骤如下：
1、创建主页面新文档（）
这个主页面将来是个包含 ASP脚本的动态页面。所以它的类型是动态脚本页面文档，文件扩
展名是 asp。你可以选择以下两种方法中的任意一种创建它：
●执行“文件/新建”命令，在弹出的新建文档对话框中做如图 1所示的操作。保存文档时，
文件命名为 main。
图 1新建 ASPVBScript动态文档
●打开站点面板，在留言板站点本地视图下面的窗口中右键单击站点名，在弹出的快捷菜单
中执行“新建文件”命令，然后将文件名的主文件名改为 main。
2、创建表格
在 DreamweaverMX中创建表格有两种模式，一种是在标准视图下插入表格，一种是在布局视
图下直接画表格。
▲在标准视图下插入表格：
“标准”视图是默认的 DreamweaverMX设计视图。若要在“标准”视图中创建表格，可以使
用“插入表格”命令。Dreamweaver 将根据您在“插入表格”对话框中选择的选项创建一个
表格，如图 2所示。
图 2插入表格和定义表格
在本例中我们插入两个表格：一个是 1行 1列，宽度是 755像素。另一个是 3行 3列，宽度
是 600像素。
▲在布局视图下绘制表格：
在“布局”视图中，可以绘制布局单元格或布局表格以定义文档的设计区域。这给了我们更
大的灵活性，想一想在页面上画表格的滋味吧！
我们需要在插入栏中切换到布局标签下，并单击布局视图，如图 3所示。单击绘制布局表格
或单元格按钮以后就可以用鼠标直接绘制了。
图 3布局视图
3、编辑表格
通过合并和拆分单元格以及插入行和列，可以很容易地修改初始表格结构以创建更复杂的设
计。我们还可以使表格的边框变得不可见，然后用表格单元格（在表格中每一行与列的交叉
处所创建的框）来控制 Web页中文本和图像的位置。当观众在浏览器中查看页面时就不会看
到设计的基础结构。这些都是对表格的编辑。通常情况下，表格编辑在标准视图下进行。
●关于表格和单元格的选中常有两种方法：
①用鼠标直接指向表格选中它们。用鼠标指向表格的边框或者是内部，根据鼠标的状态来判
断选中整个表格、某一行还是某个单元格。
②在表格中的任意一个单元格单击鼠标，然后在标签检查器选择相应的标签，以实现选中表
格或者单元格的目的，如图 4所示。
图 4通过标签检查器选择表格
●关于表格的尺寸基于百分比还是基于像素：
◇基于百分比的表格会根据浏览器窗口宽度的变化而伸展或收缩。（例如，如果您指定表格
使用 75%的宽度，则不管浏览器窗口有多大，表格都会伸展以填充 75%的水平间距。这在某
些情况下会很有用，例如，在调整窗口大小时确保导航菜单总能显示。
◇基于像素的表格被设置为某个特定宽度，并且不会随着浏览器窗口大小的改变而改变。一
般我们在用表格布局页面时，喜欢采用基于像素的表格，这样设计出来的页面更精确。本课
实例就是用基于像素的表格布局页面的。
●关于调整布局单元格大小有两种方法：
◇用鼠标直接移动到单元格的边框，拖动鼠标调整单元格的大小。
◇在属性面板直接输入单元格的宽和高，来精确的控制调整单元格的大小。
●表格和单元格的其它属性的设置都可以在属性面板中完成。
4、使用层进行布局
◇用层进行页面布局，给设计者更大的灵活性。因为可以这样说，你可以将层放在页面上你
想让它占据的任何位置。如图 5是创建层和在层面板管理层的示意图。
图 5创建层和在层面板管理层
◇虽然用层进行布局给设计者更大的灵活性，但用层布局缺乏更大的兼容性，在不同的浏览
器中看到的结果可能是不一样的，甚至在一些浏览器中根本就不支持你的层。当然我们可以
将层转换为表格（表格是最兼容的页面元素了），但是我还是建议不用层布局为好，比如重
叠的层就不能转换为表格。我们可以这样进行层和表格之间的互相转换：执行“修改/转换/
层到表格”或者“修改/转换/表格到层”就可以实现层和表格之间的互换了。
▲用表格布局页面是设计网页的基础，表格的布局是很灵活的，大家要多练习，尝试不同的
布局变化，这样才能找到和掌握更多的规律。
第四课
经过前面三课的学习，我们已经在留言板站点创建两个页面了，一个是说明页面（），一个
是主页面（）。下面我们首先挑毛病，挑一挑两个页面的创建过程和创建结果的毛病。
1、在浏览器中打开这两个页面，然后执行浏览器中的“查看/文字大小/最大”命令。咣当！
字大了，段落也乱了！怎么这个效果啊！
2、在页面的编辑过程中，每次按 Enter（回车）键是一个新段落的开始，但段落间的距离怎
么那么大啊？也找不到控制距离的命令。：（
3、仔细再看一看页面效果，怎么超级链接的文字下面都有一个下画线啊？这多不好看啊，
能不能去掉呢？
4、我想文字段落前空两个汉字的位置，每次都要按空格键设置，能不能在新段落前自动前
空两格？
5、我想表格线更细一些，可在属性面板里面好象完成不了这个目的？
我们还可以找到很多毛病和不如意的地方，怎么解决？哈哈，今天就让一个重量级选手出场
吧，它叫 CSS层叠式样式表。它可是设计网页的重要技术，有了它，我们刚才找到的那些问
题就马上可以解决掉。
一、关于 CSS样式表
层叠样式表（CSS）是一系列格式规则，它们控制网页内容的外观。使用 CSS 样式可以非常
灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。
CSS样式使您可以控制许多仅使用 HTML无法控制的属性。例如，可以指定自定义列表项目符
号并指定不同的字体大小和单位（像素、点数等等）。通过使用 CSS样式和以像素为单位设
置字体大小，可以确保以更一致的方式在多个浏览器中处理页面布局和外观。除了设置文本
格式外，还可以控制网页中块级别元素的格式和定位。例如，可以设置边距、边框、其他文
本周围的浮动文本等等。
CSS 样式表的主要优点是提供便利的更新功能；更新 CSS 样式时，使用该样式的所有文档的
格式都自动更新为新样式。
在 DreamweaverMX中主要通过“CSS样式面板”创建 CSS样式、查看 CSS样式的属性以及将
CSS样式应用于文档中的元素。选择执行“窗口/CSS样式”命令可以打开“CSS样式面板”，
如图 1所示。
CSS 样式面板中有两种视图，一个是应用样式视图，另一个是编辑样式试图，如图 1 和图 2
所示。
●应用样式视图：在这个视图下可以选择应用于文档元素的类（class）样式。“应用样式”
视图只显示自定义（class）样式。该窗格中不显示重定义的 HTML样式和选择器样式。
●编辑样式视图：在这个视图下可以查看与当前文档关联的样式定义。“编辑样式”视图显
示自定义（class）CSS样式、重定义的 HTML标签和 CSS选择器样式的样式定义。
图 1CSS样式面板
图 2CSS样式面板——编辑样式面板
二、在网页文档内部定义和引用 CSS样式
在 DreamweaverMX中打开留言板站点的说明文件（），我们在这个页面文档内部定义和引用
CSS样式。
▲重定义标签 body的属性样式
1、打开 CSS样式面板，选择编辑样式面板视图。
2、单击面板右下角的新建 CSS 样式按钮，会弹出一个新建样式对话框，如图 3 所示。请按
照图 3所示进行设置。
图 3新建 CSS样式对话框——重定义 body属性
3、设置完成以后，单击确定按钮，进入 body标签的属性设置对话框中，如图 4所示。
图 4body属性样式设置——类型属性
▲重新定义文本超级链接属性样式
1、打开 CSS样式面板，选择编辑样式面板视图。
2、单击面板右下角的新建 CSS 样式按钮，会弹出一个新建样式对话框，如图 5 所示。请按
照图 5所示进行设置。
图 5新建 CSS样式——重新定义超级链接属性
3、设置完成以后，单击确定按钮，进入 a:link的属性设置对话框中，如图 6所示。只设置
“修饰”和“颜色”，其它不设置。
图 6a:link的类型属性样式设置
4、重复步骤 2、步骤 3，分别再重新定义 a:visited和 a:hover的属性样式。和前面重新定
义 a:link唯一的不同是文字颜色的设置，分别设置成灰色和红色，其他的设置都一样。
●a:link 超级链接文字的正常外观属性。
a:visited超级链接文字访问过以后的外观属性
a:hover当鼠标经过超级链接文字时的外观属性
●经过前面对 body 和 a 标签的属性重新定义以后，定义的 CSS 样式会自动套用到页面的元
素上。这是最终的页面效果：shuoming_
三、定义和附加外部样式表
上面我们是在文档内部重新定义了一些标签的属性样式，定义的 CSS样式只对本文档起作用，
如果换了一个新文档，又要重复上面的操作，这样也太麻烦了！实际上，对于一个站点，站
点内的页面大多要求一致的外观和效果，如果我们针对一个站点定义一次 CSS样式，然后把
定义的结果套用到整个站点的页面文档，那么我们设计网站和管理网站的效率就大大提高了。
DreamweaverMX的外部样式表就是用来实现这个目的的。
让我们开始外部样式表的应用吧，先在 DreamweaverMX 中打开留言板站点的主页面文档
（），我们要以这个文档为实例完成我们的学习。
▲定义外部 CSS样式表文件
1、打开 CSS样式面板，单击右下角的新建样式按钮，则弹出新建样式对话框，如图 7所示。
请按照图 7进行设置。
图 7新建 CSS样式——外部样式文件
2、完成图 7 的设置后，单击确定按钮，则弹出保存外部样式表对话框，如图 8 所示。请按
照图 8所示进行设置和操作。
图 8保存外部样式表对话框
3、完成图 8的设置并单击保存按钮后，会弹出 body的 CSS样式定义对话框，如图 4所示，
请按照图 4进行设置。
▲在这个外部 CSS样式表文件中继续定义 CSS样式
1、单击右下角的新建样式按钮，则弹出新建样式对话框，如图 9 所示。请按照图 9 进行设
置。
图 9新建 CSS样式——td的属性样式
2、单击确定按钮以后，就弹出 td 的 CSS 样式定义对话框，它的设置和 body 的设置一样。
也可参看图 4。
3、重复步骤 1、步骤 2，在这个外部 CSS 样式表中继续定义 a:link、a:visited、a:hover
的属性样式。
4、重定义 p标签的“盒子”属性样式可以设置段落间距，如图 10所示。
图 10p标签的盒子属性样式
图 11外部 CSS样式表
△定义的外部 CSS样式表最终结果如图 11所示。
▲附加外部样式表
上面我们建立了一个外部 CSS 样式表文件（*.css），这个外部 CSS 样式文件自动附加到定
义它的页面文档中了。但站点中的其它页面文档如果想使用这个外部 CSS样式表中的样式，
就必须先附加它。具体步骤如下：
1、打开站点中的另一个页面文档。
2、打开 CSS 样式面板，单击面板右下角的“附加外部样式表”按钮，马上会弹出一个“链
接外部 CSS样式表”对话框，如图 12所示。
图 12链接外部样式表
3、在图 12所示的链接外部样式表中浏览找到要附加的 CSS样式表文件以后，单击“确定”
按钮就完成了将一个外部 CSS样式表附加到页面文档的操作，我们在 CSS样式表面板的编辑
视图下就可以看到附加的样式表，如图 11所示。
▲利用 CSS样式表模板创建外部 CSS样式表
除了在 CSS样式面板中创建外部 CSS样式表以外，我们还经常利用 CSS样式表模板创建外部
CSS样式表。步骤如下：
1、执行“文件/新建”命令，会弹出一个新建页面文档对话框，如图 13所示。
图 13利用 CSS模板创建外部 CSS样式表
2、按照图 13所示操作以后，我们就选择了一个包含 body、th、td、h1、h2、h3、h4、h5、
h6、a等标签的属性样式的 CSS样式表模板，如图 14是代码视图下 CSS样式表模板的部分内
容。
图 14代码视图下 CSS样式表模板的内容
3、我们可以直接在 CSS 样式表模板的代码视图下直接对它的内容进行编辑，也可以把它附
加到某一个页面文档以后再在 CSS样式面板的编辑视图下对它进行编辑。
4、CSS样式表模板中的 h1、h2、……、h6这些属性样式对应在属性面板中的格式操作如图 15
所示。当我们选择属性面板格式中的标题 1、标题 2、……、标题 6 时，实际上光标所在的
文档段落就应用了这些属性样式了。
图 15属性面板中段落格式设置
四、教程副页
▲特定 CSS样式设置信息参考
第五课
对一个站点来说，导航系统是很重要的。如果你的站点导航系统设计得好，访问你的网站的
用户就会感到特别方便，反之，用户会感到无所适从。本次课程我们要讨论如何在页面插入
Dreamweaver 的导航条，并对页面中的导航条的创建方法进行总结。另外，还顺便讨论一下
如何插入 flash动画等页面元素的方法。
一、规划和创建页面导航元素
1、打开留言板站点主页面文档（）。将页面顶部的表格重新拆分调整为如图 1所示的效果。
图 1页面顶部表格
2、根据图 1 所示的表格尺寸，在 FireworksMX 和 FlashMX 中创建图像和动画。（在这里下
载）
你下载的是一个 rar压缩包（），其中包括以下内容：
△一个宽 300像素、高 120像素的图像文件（），在 FireworksMX制作完成。
△一个宽 455像素、高 90像素的 flash动画文件（），在 FlashMX制作完成。
△5组共 10个宽 91像素、高 30像素的图像文件（daohang*_*），在 FireworksMX制作完成。
3、将图像 插入到图 1中①所标示的单元格。
4、将 flash动画 插入到图 1中②所标示的单元格，具体步骤是：
⑴将光标定位到图 1中②所标示的单元格中。
⑵单击插入栏中的“插入 flash”命令，弹出如图 2 所示的“选择文件“对话框。在其中浏
览选择需要插入的 flash动画文件。
图 2选择要插入的 flash动画文件
⑶选中插入的 flash动画，在属性面板可以对它进行设置和操作，如图 3所示。
图 3flash动画属性面板
二、插入导航条
1、将鼠标光标定位到图 1中③所标示的单元格，然后单击插入栏中的“插入导航条”命令，
如图 4所示。
图 4插入导航条
2、单击“插入导航条”命令以后，会弹出如图 5所示的“插入导航条“对话框。
图 5插入导航条对话框
3、在如图 5 所示的插入导航条对话框中，我们要定义 5 个导航项目，将来得到的是 5 个水
平排列的导航按钮。每个导航项目分别使用前面下载的在 FireworksMX制作完成 5组图像文
件。
▲完成以后的留言板站点主页面效果：单击这里观看
三、创建页面导航条方法总结
1、自定义简单导航条
①布局表格，导航条中有几个项目，就创建几个单元格。
②在单元格中输入文本或者插入图像。
③分别定义每个单元格中的文本或者图像的超级链接。
2、创建 Dreamweaver导航条（方法请参考前面）
3、通过插入“代码面板/代码片段/导航”创建常见的导航条，如图 5所示。
代码片段中有很多常用的导航条代码模板，利用它我们可以很容易的创建一些常见的导航条。
图 6代码片段：导航
4、创建 FireworksMX导航条
FireworksMX中也提供了创建导航条的具体工具和方法，我们在 FireworksMX中设计导航条，
然后再插入到 DreamweaverMX中进行编辑。
如图 7所示，单击插入栏中的插入 FireworksHTML命令可以实现 FireworksHTML文档的插入。
图 7插入 FireworksHTML文档
5、创建 Flash按钮导航条
如图 8所示，单击插入栏下媒体标签下的 Flash按钮命令可以实现在页面文档插入 Flash按
钮的目的。将多个 Flash按钮集合在一起也能实现导航条的功能。
图 8插入 Flash按钮
第六课
经过前面 5课的学习，我们对 DreamweaverMX创建和管理站点页面文档的前台技术有了一个
概括的认识和应用了，实际上前 5课所涉及到的应该是创建和管理站点的最基本的一些技术。
掌握了这些技术，我们设计一般的静态站点应该是没有问题了。那么现在开始留言板站点的
后台程序的创建？按道理是可以讨论这方面的问题了，但我还想再讨论一些站点页面的其他
元素和效果的创建方法。虽然这些技术可能和我们的留言板站点关系不是很大，但是因为它
们也是一些常用的技术和方法，我们还是在这里系统的学习一下吧。
一、利用时间轴和层实现页面中的滚动字幕效果。
小字报：今天留言板的最多的问题是这个教程共有几课？
看到上面这个滚动字幕的效果了吧，它是通过在 Dreamweaver时间轴面板中定义层的移动动
画来实现的。什么？Dreamweaver 也有时间轴？是的，而且你用它可以设计出不错的动画效
果呢。而且用这样的技术设计出来的动画效果更符合 web的特征。
1、单击插入栏中常用标签下的层命令按钮，在页面中拖拽鼠标插入一个层。在层中输入需
要的字幕文字。
2、打开时间轴面板。执行“窗口/其他/时间轴”命令打开时间轴面板。
3、将页面文档中的层选中，并把它拖放到时间轴的时间线上。默认的情况是插入的动画长
度为 15 帧，相应的层名（Layer1）显示在该动画栏中，并且在动画栏的两端自动加入了两
个关键帧。
4、在时间轴面板的动画栏上的关键帧按下鼠标左键并左右拖动，则可以改变关键帧的位置。
向右拖动第 15帧上的这个关键帧以延长关键帧到 60帧，如图 1所示。
图 1时间轴面板
5、在第 30 帧鼠标右键单击，在弹出的快捷菜单中选择“插入关键帧”命令，在第 30 帧插
入一个关键帧。
6、单击第 30帧，然后将页面文档中的层水平向右移动合适的距离如图 2所示。
图 2层的运动轨迹
7、在时间轴面板中选择：自动播放和循环，并把行为标志拖放到第 60帧的位置，如图 1所
示。
这个左右来回滚动的字幕效果就完成了，简单吧？其实时间轴和层结合在一切定义动画还有
很多技巧，以后慢慢研究吧。：）
二、创建当页面载入时弹出窗口的效果
先单击这里观看具体页面效果
我们可以看到页面载入时弹出了一个信息提示对话框窗口，接着又弹出了一个自定义外观的
浏览器窗口。这两个效果都是通过在行为面板中定义页面载入时的行为而实现的。我们定义
页面载入时的行为实际上就是定义<body>标签的行为。
▲弹出信息提示对话框窗口
1、在标签检查器中单击选中<body>标签，这时整个页面文档就会变成灰色状态。
2、打开行为面板，单击按钮打开行为命令下拉菜单，选中其中的“弹出信息”行为命令，
如图 3所示。
图 3行为面板——定义行为
3、在出现的弹出信息对话框的信息文本框中输入想弹出的提示信息。
▲打开浏览器窗口
1、在标签检查器中单击选中<body>标签，这时整个页面文档就会变成灰色状态。
2、打开行为面板，单击按钮打开行为命令下拉菜单，选中其中的“打开浏览器”行为命令，
如图 3所示。
3、在打开浏览器窗口设置对话框中进行将要打开的浏览器窗口的外观的参数定义，如图 4
所示。
图 4打开浏览器窗口的外观参数的定义
行为面板是个很重要的面板，我们在创建页面效果时会经常用到它，它里面有很多常见的效
果的定义。比如定义页面的状态条信息、检查页面提交表单的正确性等等。以后要多研究研
究它哦~
三、禁止访问用户的右键单击
现在你用鼠标右键在这个页面上单击一下试试……你的右键失效了吧，想把我的页面上的资
源马上拿走？嘿嘿~还是再费点工夫吧。
1、将页面文档视图转换到“代码视图”模式，然后将光标定位在</body>前面一行。这里就
是我们将要插入 JavaScript脚本代码的地方。
2、执行“插入/脚本对象/脚本”命令，会弹出一个插入脚本对话框，如图 5所示。
图 5插入脚本对话框
3、按照图 5进行设置，然后确定以后，看看我们的页面文档中出现了什么：
<scriptlanguage="JavaScript"type="text/JavaScript">
</script>
这是一对<script>标签，它定义了在页面中将要插入的脚本所使用的语言。我们通过步骤 2
得到的这样一个结果，当然也可以手工输入这些代码来实现。
4、将光标定位在<scriptlanguage="JavaScript"type="text/JavaScript">与</script>之
间。
5、打开代码片段面板，选择展开其中的“JavaScript/浏览器函数”，然后鼠标双击“禁用
右键单击”，如图 6所示。
图 6插入代码片段
完成以上操作以后，你会发现在<scriptlanguage="JavaScript"type="text/JavaScript">
与</script>之间插入了一段脚本代码。这样就基本 OK了，当然我们还可以改一下警告信息。
改这里：varmessage="嘿嘿，右键不能拿我的东西！";
四、自动搭上著名的搜索引擎，提高自己网站的访问率
自动提高自己网站的访问率？这么好的事情谁不想知道！其实很简单，方法就是让著名的搜
索引擎帮助我们。许多搜索引擎装置（自动浏览网页为搜索引擎收集信息以编入索引的程序）
读取关键字 meta标签的内容和说明 meta标签的内容，并使用该信息在它们的数据库中将您
的页面编入索引。在 DreamweaverMX中如何实现这个技术呢？
1、单击插入栏下的“文件头标签”，如图 7，我们要使用文件头标签下的两个按钮命令。
图 7文件头 meta标签属性
2、单击图 7 所示的“关键字属性”按钮，在弹出的关键字设置对话框的关键字文本框中输
入站点的关键字。比如：闪客，教程，flash等，注意多个关键字之间用逗号隔开。
3、单击图 7 所示的“说明属性”按钮，在弹出的说明设置对话框的描述文本框中输入对站
点的描述文字。比如：本站点是一个专门讨论动画设计和网站建设的站点，有大量的原创教
程。
第七课
这个教程的上篇到本课就要结束了。说实话，有一种如获重负的感觉，也终于要有一个新的
开始了。学习是一个快乐和痛苦的过程。想一想自己又给了 10MB 多数据新的生命、想一想
这么多的收获，学习过程中的付出也真值得。好了，别酸了，还是讨论我们的课程吧……
这次课定位在“画”网页，一个画字给了我们更大的设计空间！网页可以画出来？那当然。
大家别忘了，Fireworks可是专业的网页设计工具，而且 MX这个版本赋予它更强大的网页设
计功能。这次我们就讨论 FireworksMX和 DreamweaverMX结合在一起“画”一个漂亮的网页。
先看这里：留言板站点说明页面。我们就学习这个页面是怎样画出来的。
一、在 FireworksMX中绘制页面（png源文件下载）
1、新建一个画布文档。宽：755像素、高：300像素，透明背景。
2、在画布上绘制页面效果如图 1 所示。大致包括 3 部分：页面头图片、表格框、页面尾图
片。
图 1图像参考
2、给图像文档进行切片
选择工具栏中网页工具中的切片工具，然后拖动鼠标画矩形切片，如图 2所示。注意进行多
个切片的时候一定要对准确，中间不能有缝隙，实际上在切片的时候系统自动有吸附的功能，
只要边线对仔细就行。
图 2切片参考
3、如图 2所示，我们把图像一共切片分割成 5个区域，绿色显示的①②③④是切片区，第⑤
个是无切片区。这里特别要注意③、④两个切片的切割，它们的宽度应一致（10像素）。而
且千万不能把①切片区中的边框曲线切进来！（③、④两个切片区和①切片区的连接部位就
是一段曲线，应把曲线留到①切片区）
4、导出图像为包含表格代码的 HTML文件
执行“文件/导出”命令，则弹出导出对话框，如图 3所示。请按照图中所示进行设置。
图 3导出图像切片
二、在 DreamweaverMX中对导出的 FireworksMXHTML文件编辑
1、在 DreamweaverMX 中打开导出的 FireworksMXHTML 文件。或者在 DreamweaverMX 中单击
插入栏中的按钮插入 FireworksHTML。
2、这时你会发现，原来那些切片在这里都是一些表格单元。现在你清楚该怎么做了吧。
3、单击原来的⑤哪个区域，将选中的图片删除，这里是我们输入文字的主要表格单元格。
4、现在是最关键的操作。目前我们在③、④那两个单元格（原来是③④切片区域）看到的
图片等于是插入到单元格中的图片。必须把它们转变成单元格的背景图片这样的性质。这样
文字单元格随文字的输入而延伸时，③、④单元格也会跟着延伸并不断线了。可以在属性面
板完成以上操作，如图 4所示。
图 4在属性面板中进行图片性质的转换
大功告成！到此，本教程的上篇就结束了。从下一课开始我们就要讨论留言板站点的后台数
据库和程序的设计了，一起继续努力吧。
第八课
从这一课我们就要开始学习如何实现留言板站点的动态特性了。那么什么是静态站点？什么
又是动态站点呢？还是简单的说明一下：
▲静态站点和动态站点概述
△所谓“静态”指的就是网站的网页内容“固定不变”，当用户浏览器通过互联网的 HTTP
协议向 WEB 服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态 HTML 文档传送
给用户浏览器。其页面的内容使用的仅仅是标准的 HTML 代码，最多再加上一些诸如飞来飞
去的蝴蝶这样的动画效果。若网页维护者要更新网页的内容，就必须手动地来更新其所有的
HTML文档，给维护者带来大得出乎想象的工作量，如图 1。
图 1静态站点简单图示
△动态网站技术将网页维护者从一遍一遍的重复而烦琐的手动更新中解脱出来，并且可以实
现诸如留言板、BBS论坛、新闻实时发布等站点访问者与 web服务器交互性很强的页面。以
ASP技术为例，动态站点的一般实现原理如图 2所示。
图 2ASP技术动态站点简单图示
一般情况下，在我们的动态站点部署中包括两个主要内容：一个是动态脚本程序，另一个是
对数据的存储和管理。本教程中，前者使用的是 ASP技术，后者是常用的数据库技术，用数
据库来存储和管理数据是动态网站最高效的选择。下面我们就先讨论讨论数据库技术……
一、数据库技术简介
任何程序都要处理数据，如何存储和管理程序中要处理的数据是程序的关键。数据库技术是
目前使用最广泛的数据存储和管理技术，它在大量以数据处理为主的程序中起举足轻重的作
用。
目前使用最广泛的数据库类型是关系型数据库。在关系型数据库中我们可以把数据库中的数
据看成一个二维表格，如图 3所示。
图 3二维表格数据
实际上现实世界的很多数据都可以描述为如图 3所示的这种二维表格的形式。关系数据库正
式利用这种二维表格的形式来描述和管理程序中的数据的。数据库的基本组成单位是记录，
记录被视为单个实体的相关数据的集合。例如图 3表格中每一个用户的信息（表格的一行）
就是一个记录。另外，图 3表格中的用户 ID、姓名、性别、留言内容、OICQ、……等（表格
的一列）各个相关信息在数据库中用专业术语说就是一个域，比如：姓名域、性别域等等。
▲一个数据库可包含多个表，每个表具有唯一的名称。这些表可以是相关的，也可以是彼此
独立的。表中每一列代表一个域，每一行代表一条记录。如图 4所示是一个表的结构。
图 4数据库中的一个表
▲从一个或多个表中提取的数据子集称为记录集。记录集也是一种表，因为它是共享相同列
的记录的集合。通过图 5，我们可以很清楚的理解什么是记录集了吧。在 DreamweaverMX 中
定义记录集可是创建动态交互页面的重要步骤呢。
图 5记录集表
二、用 ACCESS2000创建留言板站点数据库
ACCESS2000 是微软的 OFFICE2000 办公系统中的一个重要组件。它是最常用的桌面数据库管
理系统之一，它简单易用。作为用户访问量不是很大的个人小型站点，用 ACCESS2000 设计
数据库还是可行的。下面我们就用 ACCESS2000创建留言板站点中的数据库。
▲创建数据库文档并设计数据库表结果
1、创建空数据库文档。启动 ACCESS2000程序，在出现的 MicrosoftAccess提示框中选择“新
建数据库/空 Access数据库”，如图 6所示。
图 6新建空 Access数据库
2、如图 6，单击“确定”按钮以后，出现“文件新建数据库”对话框。在其中给你的空 Access
数据库文件起个名字，找到存放它的本地硬盘文件夹。建议你把它存放到留言板站点根目录
下的 data文件夹下。E:\Inetpub\wwwroot\liuyanban_jch\data\liuyanban_
3、完成第 2 步以后，单击“创建”按钮，则会弹出一个数据库设计窗口，如图 7 所示。我
们要在这个窗口中完成数据库的设计。
图 7数据库设计窗口—创建表
4、双击表窗口中的“使用设计器创建表”，会弹出一个表设计器设计视图，在其中我要完
成表的结构（域）的设计。设计结果看这里
5、设置表中主键。右键单击 y_id 字段，在弹出的快捷菜单中选择“主键”。这样 y_id 字
段就成为表的主键了。
6、当设计完成后，单击关闭按钮关闭表设计器设计视图窗口，这时会弹出一个提示框，如
图 8所示。回答“是”保存设计结果。
图 8保存设计提示信息
7、单击“是”以后，会弹出如图 9所示的对话框。在其中输入数据库表的名字 yonghu。
图 9命名数据库表
8、重复以上步骤创建另一个数据库表_guest。设计结果看这里
▲在设计好的数据库表中输入记录
经过前面的设计步骤以后，数据库设计窗口变成如下结果，如图 10所示。
图 10向数据表中添加记录
请尝试分别在两个数据库表中添加一些记录并删除这些记录。
第九课
对于动态站点（比如我们的留言板站点）的创建，除了静态页面元素的设计之外，在服务器
端要创建和部署两个方面的内容：一个动态脚本程序（本留言板站点采用的是 ASP技术）、
另一个是数据库。在前一课我们已经创建了留言板站点的数据库文件，下面就该创建动态脚
本程序了。在创建动态脚本程序之前，将数据库和留言板站点连接在一起是最基本的要求。
原因很简单：动态脚本程序为了完成我们预定的程序任务，必定要操作数据，而数据被我们
部署在数据库中，那么首先将数据库和站点连接起来，使动态脚本程序能够很方便的读、写
数据库中的数据应该是很自然的要求了。
在 DreamweaverMX 中如何实现数据库和站点的连接呢？连接的方法有几种呢？连接好的数
据库中的数据是不是直接就可以应用到我们的页面中呢？本课要一一解决这些问题。
▲在 DreamweaverMX中实现数据库连接的方法
在 DreamweaverMX 中有两种实现数据库连接的方法：一个是通过 DSN（数据源名称）实现连
接，另一个是通过自定义连接字符串实现连接。下面就以上一课所建立的留言板数据库
（E:\Inetpub\wwwroot\liuyanban_jch\data\liuyanban_）为例，讨论它和留言板站点的连
接方法。
一、通过 DSN（数据源名称）实现连接
1、定义系统 DSN
①打开控制面板，然后打开其中的 ODBC 数据源管理器，如图 1 所示。选择其中的系统 DSN
标签，然后单击添加按钮，我们要添加一个新的系统 DSN名称。
图 1ODBC数据源管理器—添加新的系统 DSN
②单击添加按钮以后会弹出一个“创建新数据源”对话框，如图 2 所示。选择其中的
“MicrosoftAccessDriver(*.mdb)”。
图 2选择需要的驱动程序来安装数据源
③单击“完成”按钮以后，会弹出“ODBCMicrosoftAccess 安装”对话框。在其中定义数据
源名并选取数据库文件，如图 3所示。
图 3ODBCMicrosoftAccess安装
④经过上面步骤的操作以后，在图 1所示的窗口中就会显示一个新定义的数据源名称。将来
我们在 DW中就用这个数据源名称建立连接。
2、在 DreamweaverMX中通过 DSN（数据源名称）实现连接
①在 DreamweaverMX中打开留言板站点的主页面文档（）。
②打开数据库面板，单击按钮，在弹出的菜单中选择“数据源名称（DSN）”，如图 4所示。
图 4数据库面板—数据源名称
③在出现的数据源名称对话框中，选择 DSN、定义连接名称，如图 5所示。
图 5定义数据源连接
④按照图 5所示的完成操作确定以后，数据库面板就会出现新定义的连接名称，单击它前面
的+展开，可以看到留言板数据库中的两个表，如图 6 所示。这时我们已经完成了数据库和
留言板站点的连接了，连接名是 liuyanban_jch。
图 6数据库面板—完成创建的连接
以上我们完成了数据库和站点的连接，这个连接的建立是通过定义 DSN完成的。通过 DSN建
立的数据库连接的特征是：
△十分方便对数据库的管理。比如，数据库的物理路径发生了改变，只需重新定义 DSN，不
需涉及到脚本程序的更改。
△如果我们采取通过 DSN建立数据库连接，必须能控制站点服务器的 DSN的定义。也就是说
应该能够满足以下两种情况：或者站点服务器就是你自己管理；或者是你租用的服务器，但
你可以及时通知 ISP服务商帮你定义需要的 DSN。
二、通过自定义连接字符串实现连接
1、还是在留言板站点的主页面文档（）中实现这种连接。先把前面通过 DSN 实现的连接删
除，方法是右键单击连接名称，然后在弹出的快捷菜单中选择执行“删除连接”命令。
2、在数据库面板，单击按钮，在弹出的菜单中选择“自定义连接字符串”，如图 7所示。
图 7数据库面板—自定义连接字符串
3、在弹出的“自定义连接字符串”对话框中，如图 8 所示。在其中定义连接名称
liuyanban_jch，并输入自定义的连接字符串：
"Driver={MicrosoftAccessDriver(*.mdb)};DBQ=e:\Inetpub\wwwroot\liuyanban_jch\dat
a\liuyanban_"
其中 e:\Inetpub\wwwroot\liuyanban_jch\data\liuyanban_是将要连接的数据库文件的物
理绝对路径。
图 8自定义连接字符串
4、按照图 8所示的操作完成以后，数据库面板就会出现新定义的连接名称，单击它前面的+
展开，可以看到留言板数据库中的两个表，如图 6所示。这时我们已经完成了数据库和留言
板站点的连接了，连接名是 liuyanban_jch。
★以下是对设计好的动态站点的数据库文档和动态脚本文档部署到远程租用服务器上的说
明：
△通过自定义连接字符串创建的数据库连接最大的特征就是：对于租用服务器空间的用户，
不需要 ISP服务商的帮助，用户自己就可以完成数据库和动态脚本程序在 web站点服务器的
部署。但有个关键的任务需要完成：获取远程服务器上部署的数据库文件的物理地址。方法
是：
先将设计好的站点数据库文件上传到服务器，获得这个数据库文件的虚拟路径地址，然后再
通过使用 ASP服务器对象的 MapPath方法获取数据库文件在服务器上的物理路径。以我们这
个留言板站点为例，我们需要上传的站点数据库文件是：liuyanban_。将它上传到 web服务
器以后，用来打开这个文件的 URL并不使用物理路径。它使用服务器名称或域名，后接虚拟
路径，如下所示：
_但是这个路径不能用到我们自定义的连接字符串中，在自定义的
连接字符串中我们需要的是数据库文件的物理路径。
△通过使用 ASP 服务器对象的 MapPath 方法获取数据库文件在服务器上的物理路径的方法
是：
1、在 DreamweaverMX中新建一个 ASP文档页并切换到代码视图（“查看”>“代码”）。
2、在该页的 HTML代码中输入以下表达式：（以下只是一个实例，具体情况要根据你所租用
的 FTP服务器而定）
<%(("_"))%>
3、保存这个 ASP动态页面文档，并把它上传到远程服务器。
4、在 IE浏览器中通过 URL打开这个文件。这时在你的浏览器窗口中就会显示数据库文件在
远程服务器上的物理地址。
△获得了数据库文件的物理地址以后，下面要重新更改自定义的连接字符串。
1、我们在 DreamweaverMX 中创建了数据库连接以后，在站点的根文件夹中会自动产生一个
名字叫 Connections的文件夹，在这个文件夹中有一个以你所定义的连接名称为名的 ASP文
件。比如留言板站点的连接文件：liuyanban_。
2、打开这个 ASP文件，并切换到代码视图（“查看”>“代码”）。
3、在代码视图中我们可以看到以下代码：
MM_liuyanban_jch_STRING="Driver={MicrosoftAccessDriver(*.mdb)};DBQ=e:\Inetpub\w
wwroot\liuyanban_jch\data\liuyanban_"
将绿颜色的路径代码更改成远程服务器上的物理地址（通过 MapPath方法获取的）。
如果你还没有支持 ASP的租用空间，那上面这一段内容暂时对你没用。这一段内容理解起来
有点难，但是很有用啊！一定要有耐心啊：）
▲连接好的数据库中的数据是不是直接就可以应用到我们的页面中呢？
因为还需要一定的篇幅，这个问题本课不能展开讨论了。先给大家一个答案吧：NO！具体内
容下次分解……
第十课
上一课我们创建了数据库和留言板站点的连接，这样就有了进一步创建动态页面的基础。但
现在数据库中的数据还不能直接应用到页面中，因为要将数据库用作动态网页的内容源时，
必须首先创建一个要在其中存储检索数据的记录集。本次课就主要讲解记录集的创建方法以
及如何将记录集中数据绑定到动态页面中，最后再通过服务器行为的定义让大家初次体验一
下留言板主页面的动态效果。
一、在绑定面板中定义记录集
1、在 DreamweaverMX中打开留言板站点主页面（）。
2、打开绑定面板，单击按钮，在弹出的下拉菜单中选择“记录集（查询）”命令，如图 1
所示。
图 1绑定面板—定义记录集
3、在弹出的记录集定义对话框中，定义记录集名称、选择数据库连接名、选择数据库中的
表、选择表中的字段（域）、定义记录排序的方法等，如图 2所示。
图 2定义记录集
4、按照前面的步骤操作完成以后，在绑定面板就会出现新定义的记录集，单击它前面的+号，
可以展开记录集，如图 3所示。
图 3绑定面板—创建完成的记录集
二、将记录集中数据绑定到表格域
1、对留言板主页面（）中的表格重新编辑，删除单元格中的一些文字，结果如图 4所示。
图 4主页面中显示留言信息的表格
2、将记录集中的数据域（字段）绑定到表格相应的单元格中。
打开绑定面板，展开记录集。用鼠标将记录集中的 y_name字段拖放到页面表格的左上角中，
用同样的方法将其它数据域（字段）拖动到相应的单元格中，如图 5所示。
图 5将记录集中的数据绑定到单元格
3、通过上面的步骤，我们已经将记录集中的字段（也就是数据库中数据）绑定到页面中的
单元格中。这样，这些单元格中的内容实际上就是动态文本内容了。先做个实验：
①现在我们就在 ACCESS2000 中对留言板数据库中的用户信息表（yonghu）编辑记录。单击
这里查看如何在 ACCESS2000中编辑记录
②在浏览器中打开页面观察页面效果。（localhost或者 ）
虽然我们在留言板数据库的用户信息表中添加了多个记录，但是在浏览器中打开的页面中显
示的总是一个记录的绑定内容。那么怎么让页面中同时显示多个留言记录呢？下边就解决这
个问题。
三、在页面中添加服务器行为——重复区域
1、在页面中选中图 5所示的整个表格，我们要把它创建成可以重复显示的区域。
2、打开服务器行为面板，单击按钮，在弹出的下拉菜单中选择执行其中的“重复区域”命
令，接着会弹出一个重复区域设置对话框，如图 6所示。我们设置一个页面中同时显示 3条
留言记录。
图 6重复区域设置
3、设置完成以后，页面中所选中的表格（重复区域）变成灰暗显示，并且在表格的左上角
位置出现“重复”两字，如图 7所示是局部的显示效果。目前，服务器行为面板的内容如图
8所示。
图 7页面中重复区域（局部）
图 8服务器行为面板
4、现在再在浏览器中观察一下的页面效果吧，在 ACCESS2000中给用户表多添加几个记录试
试。
现在你体会到 DreamweaverMX 的服务器行为的功能的强大了吧。呵~不忙，先别高兴，才刚
开了个头……
四、向再添加一个服务器行为——显示区域
页面中的表格（如图 5）是显示用户的留言记录，当留言板数据库的用户表中没有一个记录
时（也就是没有一个用户留言时），这个表格我们是不想让它显示出来的（显示个空表干什
么？）。但是现在的情况是，你把用户表中的记录全部删除清空，页面照样会显示一个空表
格。：（（（（怎么办？下边通过再添加一个服务器行为——显示区域来解决这个问题：
1、在页面中选中图 5所示的整个表格。
2、打开服务器行为面板，单击按钮，在弹出的下拉菜单中选择执行其中的“显示区域/如果
记录不为空则显示区域”命令，如图 9。
图 9服务器行为—显示区域
3、如图 9执行以后，会弹出一个设置显示区域的对话框，在其中选择绑定的记录集，确定。
4、这时，页面中的选中表格的左上角会出现一个新的服务器行为。
经过上面的操作以后，当没有一个用户留言（用户表中记录为空）时，页面中就不会显示如
图 5所示的空表格。
好了，这次课就到这里了，本课我们学习了如何用连接好的数据库创建记录集，然后再将记
录集中的数据域绑定到页面中。另外还学习了两个服务器行为，初次体会了 DreamweaverMX
在动态网页创建上的强大功能，收获不小吧？但别忘了独立思考、举一反三啊。
第十一课
在学这课之前先给大家解释一下表单和表单域的区别。表单是指<form>代码标签，也就是 DW
设计视图下看到的红虚线框。
表单域是指表单将来要提交的内容，也就是文本字段、隐藏区域、文本区域、单选按钮、按
钮等元件叫表单域，见图 1。
图 1这些都是本课要用到的表单域
一、添加表单、布局表格
1、新建文档，保存为这个页面是签写留言的。首先要插入一个表单见图 2。
图 2插入表单面板
2、在表单内添加表格，表格布局设置见图 3。
图 3布局表格
二、添加表单域
1、姓名：在姓名对应的表格里添加文本字段，在属性面板上取名为 name 见图 4，这样做是
为了与数据库的字段名字相对应。
图 4姓名对应的表单域命名
2、OICQ、EMAIL、个人主页的表单域的添加方法同上，均为文本字段，分别命名为：
OICQ|oicq，EMAIL|mail,个人主页|homepage。
3、头像：在相对应的单元格里分别插入用户头像图片，然后添加对应的单选按钮命名为：
tx。
4、性别：在姓名对应的表格里添加两个单选按钮，选中性别男单选按钮：在属性面板为它
改名为 sex选定值为男，初始状态－已勾选，
设置见图 5。选中性别女单选按钮：在属性面板为它改名为 sex 选定值为女，初始状态－未
选中，方法同上。
图 5性别男：对应表单域单选按钮的设置
5、提交与重置按钮：在最下面的单元格添加两个按钮，选中提交按钮：在属性面板为它改
名为 Submit，标签选提交，动作－提交表单，
设置见图 6。选中重置按钮：在属性面板为它改名为 Submit2，标签选重置，动作－重设表
单，方法同上。
图 6提交按钮属性
6、添加隐藏区域：在提交按钮旁单击添加隐藏区域，在属性面板里为它改名为 IP，在值里
添加代码<%=Request("remote_addr")%>
这段代码是获取客户端 IP的，见图 7。
图 7隐藏区域设置
7、留言内容：在留言内容对应的单元格里添加文本区域在属性面板里为它改名为 liuyan，
全部添加完的表单域，见图 8。
图 8添加好的表单域
三、定义提交按钮的服务器行为
1、选中的整个表格，打开服务器行为面板，单击“+”按钮选择菜单下的插入记录，见图 9。
图 9服务器行为－插入记录
2、设置表单域与数据库字段名一一对应，在表单元素里分别依次选中元素，在下面的列里
选择与数据库相对应的域，见图 10。
图 10插入记录对话框
四、定义表单提交的错误检查（行为面板）
1、签写留言时为了避免有错误信息的写入，添加表单提交的错误检查功能。打开设计面板
下的行为面板，单击"+"选择检查表单，见图 11。
图 11设计－行为－检查表单
2、设置表单域和检查事件：name选择必需的，ociq选择数字，mail选择必需的和电子邮件，
homepage不选，liuyan选择必需的，见图 12。
图 12检查表单对话框
第十二课
上一课我们讲了签写留言提交表单和检查表单，这一课我们再回过头来充实一下页面功能--
实现留言记录导航。
一、控制一页显示留言数和翻页按钮
先介绍应用程序下的按钮：记录集导航条：翻页功能按钮，记录集导航条状态：显示留言数
量功能按钮，见图 1。
图 1应用程序－记录集导航条/记录集导航状态
1、光标移到页面下方，单击记录集导航状态就会弹出记录集导航状态对话框，见图 2。
图 2记录集导航状态对话框
2、再回车另起一行，单击记录集导航条就会弹出记录导航对话框，记录导航条将以文字方
式显示，见图 3。
图 3记录集导航条对话框
这样我们就完成了显示留言数量和翻页按钮，见图 4。
图 4已加好翻面和显示留言数功能
二、留言内容显示问题
1、现在文件基本完成。当然，你会想到：如果我们输入一些代码，会怎么样呢？我们来输
入一行代码试一下，输入：<fontcolor="#0000FF"size="7">测试</font>，结果见图 5，这
个当然是不安全的。也就是为什么决大部分论坛不支持的原因。
图 5测试结果
再测试看看，用户的留言如果很长，表格会自动撑大（文字不会自动换行）！！见图 6。
图 6撑大的表格
2. 、 为 了 解 决 以 上 问 题 ， 我 们 将 原 来 绑 定 到 留 言 单 元 格 中 的 记 录 集 字 段
（<%=(_liuyan)%>）删除，添加“文本区域”，添加好后的文本区域见图 7。
图 7添加好的文本区域
3、然后选中刚才添加的文本区域，在属性面板里点击打开动态数据对话框，添加动态留言
文本字段 y_liuyan，见图 8。
图 8为文本区域添加动态数据
现在可以在留言试试看，表格自动换行，而且不支持代码了，留言内容的显示问题也可以借
助 DreamweaverMX的插件来实现的。
第十三课
上节课我们讲了页面的翻页和显示留言数，解决了留言内容显示问题。这一课我们来继续加
工和充实和页面功能。
一、实现留言用户的头像选择与显示
1、打开签写留言页面文件，选其中一张用户头像图片，在属性面板里复制源文件 URL 链接
地址，见图 1。
图 1选中头像与图像属性
再选中与头像对应的单选按钮在属性面板的选定值处粘贴刚才复制的图片 URL地址，单选按
钮名称为"tx"，初始状态－未选中，见图 2。
图 2头像表单域选定值
其它单选按钮设置同上（单选按钮－tx，选定值－对应的图片路径，初始状态－未选中）注
意图片路径与单选按钮的选定值一一对应。
2、打开显示留言页面实现头像地址记录的绑定，在绑定面板下选择记录集中 touxiang字段，
见图 3。
图 3绑定头像动态数据按住鼠标拖动
按住鼠标拖动 touxiang 字段到页面的头像视图上，再释放鼠标即可，拖动完成后属性面板
上变成记录集中的 touxiang 动态字段了，这个字段是将来显示中选中头像按钮的值（头像
路径）见图 4。
图 4绑定动态数据拖动到头像上
二、OICQ、E-mail、个人主页和 IP显示的实现
1、打开页面，为了避免 E－mail、主页地址过长，把表格撑大，影响效果，我们用四张图片
来取代他们（点击此处下载图片）
修改页面如图 4右上角，修改表格，在单元格加上对应的图片。
2、设置 OICQ 图像的超级链接：选中 OICQ 图片在属性面板中为它添加链链，点击链接后的
浏览文件，见图 5。
图 5为 OICQ添加链接
点击浏览文件后打开选择文件对话框，第一步选择文件名称为数据源，第二步选择 y_oicq
动态字段，在 URL参数中会显示 OICQ的动态字段，第三步复制下面红色的链接，粘贴到 URL
参数的前面（下面绿色字段的前面），OICQ的完整链接应该是下面 URL的红色部份加绿色部
分，
.friend/user_show_info?ln=<%=(Recordset1.("y_oicq").Value)%>，见图 6。
图 6选择 URL为数据源
这个时候属性面板中的链接就会显示我们刚才添加的 URL参数了，这里我们还要把目标改为
_blank就是链接在新窗口中打开，见图 7。
图 7目标改为_blank
3、设置 OICQ图像的号码提示信息：选中 OICQ图像，切换到代码视图。将光标定位在
图 8在 title标签中添加记录集动态文本
做这步的目的是为了实现鼠标移到 OICQ图像上时将显示 OICQ号码提示信息，否则不显示，
如图
4、E－MAIL、主页和 IP的图像的超级链接请参考 OICQ图像的超级链接，方法相同；提示信
息同样也在 URL参数前加上下面的红色部分链接。
E-mail链接：mailto:
主页链接：
IP链接：#
到此显示留言主页面和签写留言页面就全部完成了，不是很难吧，现在就可以测试你亲手做
的留言板了：）
第十四课
上节我们完善了显示留言页面和签写留言页面，从这节课开始做管理部分的页面。
一、管理员登陆页面的实现
1、新建管理员登陆页面，首先要插入一个表单，在表单内插入表格，表格布局见图 1。
图 1管理员登陆界面
2、添加服务器行为：打开应用程序下的服务器行为面板，单击“+”按钮选择用户身份验证
下的登录用户，见图 2。
图 2服务器行为-登录用户
3、用户登录设置：首先在使用链接验证里选择数据源（我们这里数据源名称是 hlbook），
然后在如果登陆成功，转到后面的输入框里输入 main_（这是下面将要做的管理页面），最
后在如果登录失败，转到后面的输入框里输入（就是登录不成功就转到管理员登录页面）见
图 3。
图 3登录用户对话框设置
4、保存，然后打开站点 data文件夹下的 liuyan_的数据库，双击_guest数据库表，在 g_name
字段下写个用户名（用户名随意），在 g_password字段下写个用户密码（用户密码自定义）
见图 4。
图 4在数据库里添加用户名与密码
二、创建 main_管理页面
1、打开另存为 main_，首先把进入管理改为退出管理，表格下再添加一些文字回复、删除、
编辑，见图 5。
图 5main_管理页面
2、添加服务器行为：打开应用程序下的服务器行为面板，单击“+”按钮选择用户身份验证
下的限制对页的访问，见图 6。
图 6服务器行为-用户身份验证-限制对页的访问
限制对页的访问对话框设置见图 7。管理员在登陆时输入正确的用户名和密码才能登陆到管
理页面，否则跳到管理员登陆页面。
图 7限制对页的访问对话框
3、选中刚才添加的退出管理几个文字，添加器行为，打开应用程序下的服务器行为面板，
单击“+”按钮选择用户身份验证下的注销用户。这是为退出管理而添加的一个功能，见图
8。
图 8注销用户
注销用户对框设置见图 9。管理员退出以后就直接跳转到显示留言页面。
图 9注销用户对话框
第十五课
上节课我们制作了管理员登陆页面和管理主页面 main_,这节课我们继续来做编辑，回复，删
除 3个管理页面。
一、编辑用户留言（更新记录）页面的创建：
1、新建文件编辑页面，首先在插入面板添加一个表单，在表单内添加表格与表单域，布局
见图 1。
图 1单元格与表单域
2、在绑定面板里单击“+”按钮选择记录集，打开记录集对话框，记录集对话框设置见图 2。
图 2记录集设置
3、选中姓名对应的文本字段，在属性面板里改名为 name，然后点击按钮，打开动态数据对
话框，为姓名文本字段添加动态数据，选取记录集中的 y_name 字段，动态数据对话框设置
见图 3。
图 3添加动态数据
4、OICQ、E－MAIL、个人主页、留言内容动态数据绑定的方法与姓名绑定的方法相同，按照
上面的方法一一对应绑定即可。
5、选中单选按钮女，在属性面板里为它改名为 sex 选定值为女；再选中单选按钮男，在属
性面板为它改名为 sex选定值为男，然后再点击动态按钮，打开动态单选按钮对话框，在动
态单选按钮对话框中单击，打开动态数据对话框，选取记录集中的 y_xingbie字段，见图 4。
图 4设置单选按钮
因为男女单选按钮的名称均为 sex，所以只绑定一次就可以了，全部绑定到相应的表单域如
图 5。
图 5动态数据绑定完成
6、添加限制访问页行为：打开服务器行为面板，单击“+”按钮选择用户身份验证下的限制
对页面的访问，打开限制对页的访问对话框，限制对页的访问对话框设置，见图 6。
图 6限制对页的访问对话框
7、页面的数据更新，打开服务器行为面板，单击“+”按钮选择更新记录，打开更新记录对
话框，更新设置见图 7。
图 7更新记录对话框设置
编辑留言实际上就是更新数据库中的内容，编辑留言页面我们就做完了。
二、管理员回复功能页面的创建：
1、创建回复页面，首先插入表单，在表单内添加表格与表单域，布局见图 8。
图 8管理员回复页
2、绑定记录集：在绑定面板单击“+”按钮，选择添加记录集，绑定记录集方法同编辑页面
第 2节。
3、添加动态数据：姓名、EMAIL、留言内容、回复内容添加动态数据的方法同编辑页面第 3
节。
4、添加限制访问页行为：限制访问页行为添加方法同编辑页面的第 6节。
5、页面的数据更新：更新记录方法同编辑页面的第 7节。
三、删除用户留言（删除记录）页面的创建：
1、创建删除页面，首先插入表单，在表单内添加单元格与表单域，布局见图 9。
图 9删除留言表单与布局表格
2、绑定记录集：在绑定面板单击“+”按钮，选择添加记录集，绑定记录集方法同编辑页面
第 2节。
3、添加动态数据：姓名、留言内容添加动态数据的方法同编辑页面第 3节。
4、添加限制访问页行为：限制访问页行为添加方法同编辑页面的第 6节。
5、页面的服务器行为：打开服务器行为面板，单击“+”选择删除记录，打开删除记录对话
框，删除记录对话框设置见图 10。
图 10删除记录对话框
四、管理页面添加服务器行为：实现跳转到详细信息页（main_）
1、打开 main_管理主页面，选中“编辑”这两个文字，打开服务器行为面板，单击“+”选
择转到详细信息页，打开转到详细信息页对话框，详细信息页选择，转到详细信息页对话框
设置见图 11。
图 11编辑转到详细信息页对话框
传递 URL 参数为 y_id，它是 mdb 数据库里我们定义的 ID 字段类型是自动编号，自动编号在
数据库里是不会重复的，将来我们要编辑留言板中的某条留言的时候，这条留言信息的 ID
号就传递给了页面，页面就会显示这条留言的信息让我编辑了。
2、分别选中“回复”和“删除”文字，依次打开服务器行为面板，单击“+”选择转到详细
信息页，打开转到详细信息页的对话框，
“回复”的详细信息页选择；“删除”的详细信息页选择。转到详细信息页对话框设置见图
12。
图 12回复和删除转到详细信息页对话框
留言板管理部分的页面全部做完了，整个留言板系统全部做好了，用 DreamweaverMX开发的
这个留言板系统，结合了前,后台设计环境，采用了 ASPVBScript 服务器端脚本技术，功能
丰富，充满个性，尤其是不用你编写一句程序代码就能实现动态交互功能，收获不小吧：）
