2. What You'll Learn in Hour 5
+ The basic structure of a page
+ How to add a header and a footer bar to your
page
+ How to add some simple formatting to your
layout
+ How to attach an image and make it scale
+ How to use a button to link to another page
about.me/babon
4. Adding a Header and Footer
Add to mobile_template.html
● header
● content
● footer
Hints: data-role="page"
data-role="header"
data-role="content"
data-role="footer" about.me/babon
5. Formatting Text Content
Header section should contain your H1 tag.
Footer section typically contains H3 tag.
Add some p tags to the content.
about.me/babon
6. Adding an Image
Add a largish image to the content area
Add style to the head to make image "stretchy"
<style type=text/css>
img {
max-width: 100%;
}
</style> about.me/babon
7. Linking to a Second Page
Create a second page.
Hints: data-role="page" id="pageone"
data-role="page" id="pagetwo"
about.me/babon
8. Linking to a Second Page
Create text links to navigate between pages.
Hints: data-role="button" href="#pagetwo"
data-role="button" href="#pageone"
Gene's busted example.
about.me/babon
9. Assignment
Build a three-page site that features
classmates' LinkedIn info.
Use tutorials from jQuery jAM and
documentation from jQueryMobile for
assistance.
about.me/babon
10. Additional Tutorials
Tutorials to be reviewed for homework ...
jQuery Mobile for Absolute Beginners
Parts 1, 2, 3, 4
Getting Started with jQuery Mobile
Creating a Website Using jQuery Mobile
Part 1
about.me/babon
