Add dynamic content to pages

Search
Adobe Dreamweaver User Guide

On this page

Applies to: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Note:

The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

About adding dynamic content

After you define one or more sources of dynamic content, you can use the sources to add dynamic content on the page. Content sources can include a column in a recordset, a value submitted by an HTML form, the value contained in a server object, or other data.

In Dreamweaver, you can place dynamic content almost anywhere in a web page or its HTML source code. You can place dynamic content at the insertion point, replace a text string, or insert it as an HTML attribute. For example, dynamic content can define the src attribute of an image, or the value attribute of a form field.

You can add dynamic content to a page by selecting a content source in the Bindings panel. Dreamweaver inserts a server-side script in the page’s code instructing the server to transfer the data from the content source to the page’s HTML code when the page is requested by a browser.

There is often more than one way to make a given page element dynamic. For example, to make an image dynamic you can use the Bindings panel, the Property inspector, or the Image command in the Insert menu.

By default, an HTML page can display only one record at a time. To display the other records in the recordset, you can add a link to move through the records one at a time, or you can create a repeating region to display more than one record on a single page.

About dynamic text

Dynamic text adopts any text formatting applied to the existing text or to the insertion point. For example, if a Cascading Style Sheet (CSS) style affects the selected text, the dynamic content replacing it is also affected by the style. You can add or change the text format of dynamic content by using any of the Dreamweaver text formatting tools.

You can also apply a data format to dynamic text. For example, if your data consists of dates, you can specify a particular date format such as 04/17/00 for U.S. visitors, or 17/04/00 for Canadian visitors.

Make text dynamic

You can replace existing text with dynamic text, or you can place dynamic text at a given insertion point on the page.

Add dynamic text

  1. In Design view, select text on the page, or click where you want to add dynamic text.
  2. In the Bindings panel (Window > Bindings), select a content source from the list. If you select a recordset, specify the column you want in the recordset.

    The content source should contain plain text (ASCII text). Plain text includes HTML. If no content sources appear in the list, or if the available content sources don’t meet your needs, click the Plus (+) button to define a new content source.

  3. (Optional) Select a data format for the text.
  4. Click Insert, or drag the content source onto the page.

    A dynamic content placeholder appears. (If you selected text on the page, the placeholder replaces the text selection.) The placeholder for recordset content uses the syntax {RecordsetName.ColumnName}, where Recordset is the name of the recordset and ColumnName is the name of the column you chose from the recordset.

    Sometimes, the length of the placeholders for dynamic text distorts the page’s layout in the Document window. You can solve the problem by using empty curly braces as placeholders, as described in the next topic.

Display placeholders for dynamic text

  1. Select Edit > Preferences > Invisible Elements (Windows) or Dreamweaver > Preferences > Invisible Elements (Macintosh).
  2. In the Show Dynamic Text As pop‑up menu, select { }, and click OK.

Make images dynamic

You can make images on your page dynamic. For example, suppose you design a page to display items for sale at a charity auction. Each page would include descriptive text and a photo of one item. The page’s general layout would remain the same for each item, but the photo (and descriptive text) could change.

  1. With the page open in Design view (View > Design), place the insertion point where you want the image to appear on the page.
  2. Select Insert > Image.

    The Select Image Source dialog box appears.

  3. Click the Data Sources option (Windows) or the Data Source button (Macintosh).

    A list of content sources appears.

  4. Select a content source from the list, and click OK.

    The content source should be a recordset that contains the paths to your image files. Depending on the file structure of your site, the paths can be absolute, document relative, or root relative.

    Note:

    Dreamweaver does not currently support binary images stored in a database.

    If no recordsets appear in the list, or if the available recordsets don’t meet your needs, define a new recordset.

Make HTML attributes dynamic

You can dynamically change the appearance of a page by binding HTML attributes to data. For example, you can change the background image of a table by binding the table’s background attribute to a field in a recordset.

You can bind HTML attributes with the Bindings panel or with the Property inspector.

Make HTML attributes dynamic with the Bindings panel

  1. Open the Bindings panel by choosing Window > Bindings.
  2. Ensure that the Bindings panel lists the data source you want to use.

    The content source should contain data that’s appropriate for the HTML attribute you want to bind. If no sources of content appear in the list, or if the available content sources don’t meet your needs, click the Plus (+) button to define a new data source.

  3. In Design view, select an HTML object.

    For example, to select an HTML table, click inside the table and click the <table> tag in the tag selector on the bottom-left of the Document window.

  4. In the Bindings panel, select a content source from your list.
  5. In the Bind To box, select an HTML attribute from the pop‑up menu.
  6. Click Bind.

    The next time the page runs on the application server, the value of the data source will be assigned to the HTML attribute.

Make HTML attributes dynamic with the Property inspector

  1. In Design view, select an HTML object and open the Property inspector (Window > Properties).

    For example, to select an HTML table, click inside the table and click the <table> tag in the tag selector on the bottom-left of the Document window.

  2. How you bind a dynamic content source to the HTML attribute depends on where it is located.

    • If the attribute you want to bind has a folder icon next to it in the Property inspector, click the folder icon to open a file selection dialog box; then click the Data Sources option to display a list of data sources.

    • If the attribute you want to bind does not have a folder icon next to it, click the List tab (the lower of the two tabs) on the left side of the inspector.

      The Property inspector’s List view appears.

    • If the attribute you want to bind is not listed in the List view, click the Plus (+) button; then enter the attribute’s name or click the small arrow button and select the attribute from the pop‑up menu.

  3. To make the attribute’s value dynamic, click the attribute; then click the lightning-bolt icon or folder icon at the end of the attribute’s row.

    If you clicked the lightning bolt icon, a list of data sources appears.

    If you clicked the folder icon, a file selection dialog box appears. Select the Data Sources option to display a list of content sources.

  4. Select a source of content from the list of content sources, and click OK.

    The content source should hold data that’s appropriate for the HTML attribute you want to bind. If no content sources appear in the list, or if the available content sources don’t meet your needs, define a new content source.

    The next time the page runs on the application server, the value of the data source will be assigned to the HTML attribute.

Make ActiveX, Flash, and other object parameters dynamic

You can make the parameters of Java applets and plug‑ins dynamic, as well as the parameters of ActiveX, Flash, Shockwave, Director, and Generator objects.

Before starting, make sure the fields in your recordset hold data that’s appropriate for the object parameters you want to bind.

  1. In Design view, select an object on the page and open the Property inspector (Window > Properties).
  2. Click the Parameters button.
  3. If your parameter does not appear in the list, click the Plus (+) button and enter a parameter name in the Parameter column.
  4. Click the parameter’s Value column, and then click the lightning-bolt icon to specify a dynamic value.

    A list of data sources appears.

  5. Select a data source from the list, and click OK.

    The data source should hold data that’s appropriate for the object parameter you want to bind. If no data sources appear in the list, or if the available data sources don’t meet your needs, define a new data source.