beautypg.com

Make images dynamic make html attributes dynamic, Make images dynamic, Make html attributes dynamic – Adobe Dreamweaver CC 2014 v.13 User Manual

Page 556

background image

To the top

To the top

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 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

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.

549

This manual is related to the following products:
See also other documents in the category Adobe Software: