Adobe Dreamweaver CS5.5 Studio Techniques (Joanne Romanovich's Library) by David Powers

Author:David Powers
Language: eng
Format: epub
Published: 2011-09-11T16:00:00+00:00

<div data-role="page" id="page2">

<div data-role="header">

<h1>Page Two</h1>

</div>

<div data-role="content">

Content

</div>

<div data-role="footer">

<h4>Page Footer</h4>

</div>

</div>

Your initial impression is likely to be that someone has run riot with <div> elements. Each page block is wrapped in a <div>, as are the headers, footers, and content sections. Although this sounds contrary to HTML5’s aims of a more meaningful, semantic structure, the reality is somewhat different, as you’ll see in a moment.

The other points to note in this basic structure are

• Most elements contain a data-role attribute that describes the element’s role within the structure. This attribute is one of the most important features of jQuery Mobile. It’s what the HTML5 specification calls a custom data attribute. So, it’s a perfectly valid markup.

• Each <div> that represents a page within the site is identified by data-role=“page”.

• Each page block has a unique ID. By default, Dreamweaver assigns page to the first one, page2 to the second, and so on.

• The links that load these internal page blocks point to named anchors—in other words, the ID preceded by a hash sign. For example, the link to the second page block uses href=“#page2”. It’s only DOM manipulation that makes it appear to be a separate page. As you’ll see later in this chapter, links to external pages point to the filename or URL.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.