Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Customizing Content
Though they look like pages, the four "pages" that are generated in the mobile starter page are not HTML pages. But they use the jQuery Mobile and CSS code to define blocks of content that appears and disappears in a way that feels like navigating from page to page. If you've experimented with Spry widgets in earlier versions of Dreamweaver—for instance, working with Spry Tabbed Panels or Spry Collapsible Panels—the concept is very similar.
Certain sections of the "pages" are editable:
- Anything inside heading codes (<h1>, <h2>, and so on)
- Placeholder "content" text
Other than in those areas, proceed with extreme caution. Most of the HTML code that comes with the starter page is necessary for navigation between the "pages" of the mobile page. That's about as far as we'll go in dissecting why jQuery Mobile pages work, but it's enough to customize the content of these "pages."
Here's the main challenge: You can't really see or navigate through jQuery Mobile "pages" without working in Live View, and you can't edit HTML content in Design view with Live View turned on. Some options are available for solving this dilemma, though:
- Plan A: Edit in Design view, with Live View turned off.
- Plan B: Edit in Split view, with Live View turned on in the Design view side of the split screen.
I normally advise taking advantage of Design view as much as possible. But in this case, I think plan B works better. You can select content in the Design view side of Split view, even with Live View turned on. It's fairly simple to edit that selected content in the Code side of Split view. Or you can edit in Design view with Live View turned off, toggling back and forth between having Live View on and Live View off. By turning Live View on frequently, you can see the results as they'll appear in a mobile device.
If you decide to work in Split view, click the Refresh Design View button in the Document toolbar frequently (see Figure 7). Refreshing updates the Live View on the Design view side of the Split view, reflecting the change(s) you made in the Code view side.
)
Figure 7 Editing content in Split view, with Live View turned on in the Code view side.
Before signing off of the first installment of this series on designing mobile pages and apps with Dreamweaver CS5.5, I'll guide you to a deeper level of understanding how content is organized in jQuery Mobile "pages." Before we get into that, I'll introduce you to the dimension of formatting with themes.