In Design view, select
text on the page, or click where you want to add dynamic text.
Last updated on
Apr 25, 2024
- Dreamweaver User Guide
- Introduction
- Dreamweaver and Creative Cloud
- Dreamweaver workspaces and views
- Set up sites
- About Dreamweaver sites
- Set up a local version of your site
- Connect to a publishing server
- Set up a testing server
- Import and export Dreamweaver site settings
- Bring existing websites from a remote server to your local site root
- Accessibility features in Dreamweaver
- Advanced settings
- Set site preferences for transferring files
- Specify proxy server settings in Dreamweaver
- Synchronize Dreamweaver settings with Creative Cloud
- Using Git in Dreamweaver
- Manage files
- Create and open files
- Manage files and folders
- Getting and putting files to and from your server
- Check in and check out files
- Synchronize files
- Compare files for differences
- Cloak files and folders in your Dreamweaver site
- Enable Design Notes for Dreamweaver sites
- Preventing potential Gatekeeper exploit
- Layout and design
- CSS
- Understand Cascading Style Sheets
- Laying out pages using CSS Designer
- Using CSS preprocessors in Dreamweaver
- How to set CSS Style preferences in Dreamweaver
- Move CSS rules in Dreamweaver
- Convert inline CSS to a CSS rule in Dreamweaver
- Work with div tags
- Apply gradients to background
- Create and edit CSS3 transition effects in Dreamweaver
- Format code
- Page content and assets
- Set page properties
- Set CSS heading properties and CSS link properties
- Work with text
- Find and replace text, tags, and attributes
- DOM panel
- Edit in Live View
- Encoding documents in Dreamweaver
- Select and view elements in the Document window
- Set text properties in the Property inspector
- Spell check a web page
- Using horizontal rules in Dreamweaver
- Add and modify font combinations in Dreamweaver
- Work with assets
- Insert and update dates in Dreamweaver
- Create and manage favorite assets in Dreamweaver
- Insert and edit images in Dreamweaver
- Add media objects
- Adding videos in Dreamweaver
- Insert HTML5 video
- Insert SWF files
- Add audio effects
- Insert HTML5 audio in Dreamweaver
- Work with library items
- Using Arabic and Hebrew text in Dreamweaver
- Linking and navigation
- jQuery widgets and effects
- Coding websites
- About coding in Dreamweaver
- Coding environment in Dreamweaver
- Set coding preferences
- Customize code coloring
- Write and edit code
- Code hinting and code completion
- Collapse and expand code
- Reuse code with snippets
- Lint code
- Optimize code
- Edit code in Design view
- Work with head content for pages
- Insert server-side includes in Dreamweaver
- Using tag libraries in Dreamweaver
- Importing custom tags into Dreamweaver
- Use JavaScript behaviors (general instructions)
- Apply built-in JavaScript behaviors
- About XML and XSLT
- Perform server-side XSL transformations in Dreamweaver
- Performing client-side XSL transformations in Dreamweaver
- Add character entities for XSLT in Dreamweaver
- Format code
- Cross-product workflows
- Installing and using extensions to Dreamweaver
- In-App updates in Dreamweaver
- Insert Microsoft Office documents in Dreamweaver (Windows only)
- Working with Fireworks and Dreamweaver
- Edit content in Dreamweaver sites using Contribute
- Dreamweaver-Business Catalyst integration
- Create personalized email campaigns
- Templates
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Create a Dreamweaver template
- Create editable regions in templates
- Create repeating regions and tables in Dreamweaver
- Use optional regions in templates
- Define editable tag attributes in Dreamweaver
- How to create nested templates in Dreamweaver
- Edit, update, and delete templates
- Export and import xml content in Dreamweaver
- Apply or remove a template from an existing document
- Edit content in Dreamweaver templates
- Syntax rules for template tags in Dreamweaver
- Set highlighting preferences for template regions
- Benefits of using templates in Dreamweaver
- Mobile and multiscreen
- Dynamic sites, pages and web forms
- Understand web applications
- Set up your computer for application development
- Troubleshoot database connections
- Removing connection scripts in Dreamweaver
- Design dynamic pages
- Dynamic content sources overview
- Define sources of dynamic content
- Add dynamic content to pages
- Changing dynamic content in Dreamweaver
- Display database records
- Provide and troubleshoot live data in Dreamweaver
- Add custom server behaviors in Dreamweaver
- Building forms using Dreamweaver
- Use forms to collect information from users
- Create and enable ColdFusion forms in Dreamweaver
- Create web forms
- Enhanced HTML5 support for form elements
- Develop a form using Dreamweaver
- Building applications visually
- Build master and detail pages in Dreamweaver
- Build search and results pages
- Build a record insert page
- Build an update record page in Dreamweaver
- Building record delete pages in Dreamweaver
- Use ASP commands to modify database in Dreamweaver
- Build a registration page
- Build a login page
- Build a page that only authorized users can access
- Securing folders in Coldfusion using Dreamweaver
- Using ColdFusion components in Dreamweaver
- Test, preview, and publish websites
- Troubleshooting
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
-
-
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.
-
(Optional) Select a data format for the text.
-
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
-
Select Edit > Preferences > Invisible Elements (Windows) or Dreamweaver > Preferences > Invisible Elements (Macintosh).
-
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.
-
With the page open in Design view (View > Design), place the insertion point where you want the image to appear on the page.
-
Select Insert > Image.
The Select Image Source dialog box appears.
-
Click the Data Sources option (Windows) or the Data Source button (Macintosh).
A list of content sources appears.
-
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
-
Open the Bindings panel by choosing Window > Bindings.
-
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.
-
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.
-
In the Bindings panel, select a content source from your list.
-
In the Bind To box, select an HTML attribute from the pop‑up menu.
-
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
-
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.
-
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.
-
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.
-
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.
-
In Design view, select an object on the page and open the Property inspector (Window > Properties).
-
Click the Parameters button.
-
If your parameter does not appear in the list, click the Plus (+) button and enter a parameter name in the Parameter column.
-
Click the parameter’s Value column, and then click the lightning-bolt icon to specify a dynamic value.
A list of data sources appears.
-
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.
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online