Dreamweaver

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.