向页面添加动态内容

上次更新日期: 2024年4月25日
注释

用户界面已经在 Dreamweaver 和更高版本中做了简化。 因此,您可能在 Dreamweaver 和更高版本中找不到本文中描述的一些选项。 有关详细信息,请参阅此文章

关于添加动态内容

定义一个或多个动态内容来源后,您可以使用这些来源在页面上添加动态内容。内容来源可以包括记录集中的列、HTML 表单提交的值、服务器对象中包含的值或其他数据。

在 Dreamweaver 中,您几乎可以在网页或其 HTML 源代码中的任何位置放置动态内容。您可以在插入点放置动态内容、替换字符串或将其作为 HTML 属性插入。例如,动态内容可以定义图像的 src 属性或表单字段的 value 属性。

您可以通过在"绑定"面板中选择内容来源来向页面添加动态内容。Dreamweaver 会在页面代码中插入服务器端脚本,指示服务器在浏览器请求页面时将数据从内容来源转移到页面的 HTML 代码。

通常有多种方法可以使给定的页面元素变为动态的。例如,要使图像变为动态的,您可以使用"绑定"面板、属性检查器或"插入"菜单中的"图像"命令。

默认情况下,一个 HTML 页面一次只能显示一条记录。 要显示记录集中的其他记录,您可以添加链接以逐一浏览记录,或者可以创建重复区域以在单页面上显示多个记录。

关于动态文本

动态文本会采用应用于现有文本或插入点的文本格式。例如,如果层叠样式表 (CSS) 样式影响选定的文本,则替换该文本的动态内容也会受到该样式的影响。您可以使用任何 Dreamweaver 文本格式工具来添加或更改动态内容的文本格式。

还可以将数据格式应用于动态文本。 例如,如果您的数据由日期组成,您可以指定特定的日期格式,如美国访客的 04/17/00。访客,或加拿大访客的 17/04/00。

将文本动态化

您可以用动态文本替换现有文本,或者可以在页面上的给定插入点放置动态文本。

添加动态文本

在设计视图中,选择页面上的文本,或单击要添加动态文本的位置。
在"绑定"面板("窗口">"绑定")中,从列表中选择内容来源。如果您选择记录集,请指定记录集中所需的列。

内容源应包含纯文本(ASCII 文本)。 纯文本包括 HTML。 如果列表中没有显示内容来源,或者可用的内容来源不满足您的需求,请单击加号 (+) 按钮来定义新的内容来源。

(可选)为该文本选择一种数据格式。
单击“插入”,或将内容源拖到页面上。

此时将显示动态内容的占位符。 (如果您在页面上选择了文本,占位符将替换文本选择。)记录集内容的占位符使用语法 {RecordsetName.ColumnName},其中 Recordset 是记录集的名称,ColumnName 是您从记录集中选择的列的名称。

有时,动态文本占位符的长度会扭曲文档窗口中页面的布局。您可以使用空的花括号作为占位符来解决此故障,如下一主题中所述。

显示动态文本的占位符

选择"编辑">"偏好设置">\n"不可见元素"(Windows) 或 Dreamweaver >"偏好设置">\n"不可见元素"(Macintosh)。
在"显示动态文本为"弹出菜单中,选择 { },\n然后单击"确定"。

将图像动态化

可以将页面上的图像动态化。 例如,假设您设计了一个页面来展示\n慈善拍卖会上的待售物品。每个页面都包含描述性文本和一个物品的照片。页面的整体布局对于每个物品都保持\n相同,但照片(和描述性文本)可以更改。

在 Design 视图中打开页面("视图">\n"设计"),将插入点放在您希望图像出现\n的页面位置。
选择“插入”>“图像”。

出现“选择图像源”对话框。

单击"数据源"选项 (Windows) 或"数据源"\n按钮 (Macintosh)。

出现内容源列表。

从列表中选择一个内容源并单击“确定”。

内容源应是包含图像文件路径的记录集。根据您网站的文件结构,路径可以是绝对路径、文档相对路径或根相对路径。

注释

Dreamweaver 目前不支持存储在数据库中的二进制图像。

如果列表中没有显示记录集,或者可用的记录集无法满足您的需求,请定义新的记录集。

将 HTML 属性动态化

您可以通过将 HTML 属性绑定到数据来动态更改页面的外观。例如,您可以\n通过将表格的 背景 属性\n绑定到记录集中的字段来更改表格的背景图像。

您可以使用"绑定"面板或"属性"检查器来绑定 HTML 属性。

使用"绑定"面板使 HTML 属性变为动态

选择"窗口">"绑定"来打开"绑定"面板。
确保"绑定"面板列出您要使用的数据源。

内容源应包含适合您要绑定的 HTML 属性的数据。如果列表中没有显示内容源,或者可用的内容源不满足您的需求,请单击加号 (+) 按钮来定义新的数据源。

在“设计”视图中选择 HTML 对象。

例如,要选择 HTML 表格,请单击表格内部,然后单击"文档"窗口左下角的标记选择器中的 <table> 标记。

在"绑定"面板中,从列表中选择内容源。
在"绑定到"框中,从弹出菜单中选择 HTML 属性。
单击“绑定”。

下次在应用程序服务器上运行页面时,数据源的值将分配给 HTML 属性。

使用"属性"检查器使 HTML 属性变为动态

在"设计"视图中,选择 HTML 对象并打开"属性"检查器("窗口">"属性")。

例如,要选择 HTML 表格,请在表格内单击,然后在"文档"窗口左下角的标记选择器中单击 <table> 标记。

如何将动态内容来源绑定到 HTML 属性取决于其所在位置。
  • 如果要绑定的属性在"属性"检查器中旁边有文件夹图标,请单击文件夹图标打开文件选择对话框;然后单击"数据源"选项以显示数据源列表。

  • 如果要绑定的属性旁边没有文件夹图标,请单击检查器左侧的"列表"选项卡(两个选项卡中下面的那个)。

    将显示"属性"检查器的"列表"视图。

  • 如果要绑定的属性未在列表视图中列出,请单击加号 (+) 按钮;然后输入属性名称或单击小箭头按钮,从弹出菜单中选择属性。

要使属性值变为动态,请单击属性;然后单击属性行末尾的闪电图标或文件夹图标。

如果您单击了闪电图标,将显示数据源列表。

如果您单击了文件夹图标,将显示文件选择对话框。选择“数据源”选项以显示内容源列表。

从内容源列表中选择内容源,然后单击"确定"。

内容源应包含适用于要绑定的 HTML 属性的数据。如果列表中未显示内容源,或者可用的内容源不符合您的需求,请定义新的内容源。

下次页面在应用程序服务器上运行时,数据源的值将分配给 HTML 属性。

使 ActiveX、Flash 和其他对象参数变为动态

您可以使 Java 小程序和插件的参数变为动态,以及 ActiveX、Flash、Shockwave、Director 和 Generator 对象的参数。

开始之前,请确保记录集中的字段包含适用于要绑定的对象参数的数据。

在"设计"视图中,选择页面上的对象并打开"属性"检查器("窗口">"属性")。
单击“参数”按钮。
如果您的参数未显示在列表中,请单击"+"按钮,然后在"参数"列中输入参数名称。
单击参数的"值"列,然后单击闪电图标以指定动态值。

将出现数据源列表。

从列表中选择一个数据源并单击“确定”。

数据源应包含适用于要绑定的对象参数的数据。如果列表中未显示数据源,或者可用的数据源不符合您的需求,请定义新的数据源。