• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 5. Dynamic Text and Recordsets > Styling Dynamic Content

Styling Dynamic Content

One of the most powerful features of Dreamweaver is that it allows you to format dynamic content in the same way you format static content. This means you can apply HTML formatting or CSS (Cascading Style Sheets) to dynamic content.

To apply a CSS style to dynamic text:

Create a new dynamic page by selecting File > New in the Site window.

Add a recordset to the page (see the Bindings Panel section of Chapter 2 for more information).

On the Application tab of the Insert toolbar, click on the Dynamic Text button to insert a dynamic text element.

The Dynamic Text dialog box will appear (Figure 5.37).

Figure 5.37. The Dynamic Text dialog box allows you to select only one field.

In the Dynamic Text dialog box, select the field you want to use as the source for the dynamic text.

Click OK to close the dialog box.

A placeholder for the Dynamic Text will appear on the page.

From the menu bar, select Text > CSS Styles > New CSS Style.

The New CSS Style dialog box will appear.

In the New CSS Style dialog box, name the style “.dynamic,” select Make Custom Style (Class), and click on the radio button beside This Document Only (Figure 5.38).

Figure 5.38. A new style we’ll apply to dynamic text.

Click on OK to open the CSS Style Definition dialog box.

Change the text size to 36, and color it red (Figure 5.39).

Figure 5.39. Obviously, we’re not choosing a subtle style.

Click OK to close the dialog box.

In the Document window, select the dynamic text you inserted earlier.

In the CSS Styles panel, located in the Design panel group (Figure 5.40, Window > CSS styles), click on the .dynamic style.

Figure 5.40. Assign styles to text using the CSS Styles panel.

The dynamic text placeholder will change size and color.

From the View menu, select Live Data to see your dynamic text in all its styled glory (Figure 5.41).

Figure 5.41. The style is applied to the dynamic text we selected in Step 11.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint