User Guide Cancel

Add dynamic content to pages

Search
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site

 

Note:

The user interface has been simplified in Dreamweaver and later. As a result, you may not find some of the options described in this article in Dreamweaver 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.

More like this

Adobe logo

Sign in to your account

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy