0. Today’s featured website- be sure to check these out before getting started!:
Creating a mobile web app with Dreamweaver CS6
1. Make a plan- what will your app be about?
MHS? Cute puppies? Boston? Your favorite band/food/TV show/movie/game?
Plan to create at least 4 pages- 1 home page and 3 sub-pages.
Sketch out your topic, home page, and sub-pages on a piece of paper or somewhere on your computer (Notepad, Google Docs, Post-it). Write down ideas for each page- the content you will include (images, links, text).
2. Code examples
When you have a plan, you’re ready to open Dreamweaver and begin!
Here’s some sample code to help get you started. You are free to once again check out the examples from W3Schools.com; just copy and paste their code into Dreamweaver and change it up for your own content.
Adding or removing a page
Right now, a typical page looks like this:
<div data-role=”page” id=”page5″>
<div data-role=”header”>
<h1>Page Five</h1>
</div>
<div data-role=”content”>
Content
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
To create a new page, simply copy and paste all of that somewhere in Dreamweaver, maybe at the end after your last page, which should be around line 63 or so if you don’t have much content. You can change its format later if you want to add collapsible blocks or a side panel (for example).
Make sure you give it a new id; for example, you are starting with 4 pages, so if you make 1 more new page it should be page 5 (like I’ve indicated in the code above). If you add more, just keep counting (page 6, page 7, etc.).
Page with collapsible blocks
Copy and paste this in place of the code of one of your pages- replace
<div data-role=”content”>
Content
</div>
with the following:
<div data-role=”main” class=”ui-content”>
<div data-role=”collapsibleset”>
<div data-role=”collapsible”>
<h3>Click me – I’m collapsible!</h3>
<p>I’m the expanded content.</p>
</div>
<div data-role=”collapsible”>
<h3>Click me – I’m collapsible!</h3>
<p>I’m the expanded content.</p>
</div>
<div data-role=”collapsible”>
<h3>Click me – I’m collapsible!</h3>
<p>I’m the expanded content.</p>
</div>
<div data-role=”collapsible”>
<h3>Click me – I’m collapsible!</h3>
<p>I’m the expanded content.</p>
</div>
</div>
</div>
This gives you an “accordion-style menu” with four different sections; you can delete or add sections as needed.
Page with side panel
This little trick mimics the UI of a native app- see it in action here. Use the following code in place of one of your pages. Remember, you are replacing
<div data-role=”content”>
Content
</div>
with the following:
<div data-role=”panel” id=”myPanel”>
<h2>Panel Header</h2>
<p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p>
<a href=”#pageone” data-rel=”close” class=”ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left”>Close panel</a>
</div>
<div data-role=”header”>
<h1>Page Header</h1>
</div>
<div data-role=”main” class=”ui-content”>
<p>Click on the button below to open the Panel.</p>
<a href=”#myPanel” class=”ui-btn ui-btn-inline ui-corner-all ui-shadow”>Open Panel</a>
</div>
Adding icons to headers
This adds a back button to your home page (to change it to another page, use #page1 or #page2 after <a href>, for example, instead of #page):
<a href=”#page” data-icon=”back”>Back</a>
This adds a home button to your home page:
<a href=”#page” data-icon=”home”>Home</a>
Put these around your <h1> (back button first to be on left, home button after to be on right). See this example for more info.
If you want more icons, go here for a list; just change data-icon=”icon name” to add your icon.
3. Helpful links
jQuery Mobile code examples from W3Schools.com
List of jQuery Mobile data icons
Free icons (you will have to sign up for a free account to download more than 1 or 2)