Part 2 Mobile Apps

sambungan mobile apps

part 2

1
Design simple app with Dreamweaver CS6 – Part 2
1. Extract the file that you have downloaded from Online Learning.
2. Save the folder inside c:\webDreamweaver\jQueryMyRestaurant
3. Open DW CS6
4. Go to Menu Site>New Site
5. When the New Site window is prompted; insert:
Site Name : Monroe Restaurant
Local Site Folder : c:\webDreamweaver\jQueryMyRestaurant
Click Done button. You should see your site Local Files on the bottom left of DW display
6. Right the Local site panel and choose ‘Refresh Local File’.
7. Double click ‘www folder’ to find index.html file. Open index.html file
8. On the Source Code window, click Split button the click Live button to preview index.html content
9. Click again Live button so that you can work out on html tag
10. We are going to create a CSS file to create new style for the content inside index.html
11. Choose menu File>New>Blank Page>CSS and click Create button. DW will create a CSS file
12. Save the file in C:\webDreamweaver\myRestaurantApps ; in the myRestaurantApps folder, create a new folder and name it as ‘include’. Then save the css file in include folder as ‘Style1.css’.
C:\webDreamweaver\myRestaurantApps\include\Style1.css
13. Double click Style1.css to open it in Source Code window
14. In your site panel for Local Files, locate templateStyle1.css. Double click this file to open it
15. Copy the text from the symbol ‘/*’ in line 3 until ‘*/’ in line 57. Paste the copied text inside Style1.css file at line 3 in the Source Code window
16. Save your Style1.css file
17. Close the templateStyle1.css in the Source Code window
18. Click the index.hmtl tab in the Source Code window
19. Drag the Style1.css file from your site panel and release it inside the index.html code just after the tag:
<title>jQuery Mobile Web App</title>
You should notice that new tag line will be inserted to the source code:
<title>jQuery Mobile Web App</title>
<link rel="stylesheet" type="text/css" href="../include/style1.css">
20. Save your index.html file
21. Click the Live button in the Source Code window to look at any changes in your index.html file. Any changes?
22. Click the Style1.css tab in the Source Code window
23. Go to the end of line 2 and press Enter on your keyboard
Type:
body{
margin:0;
padding:0; }
2
24. Click the index.html tab in the Source Code window then Live button to see any changes. Any changes?
25. While you’re still in the index.html source code, go to line 13; and press Enter just below the tag
<div data-role="page" id="page">
Type below tag to insert Logo just below the tag above:
<div class="logo"></div>
26. Click the Style1.css tab in the Source Code window and type :
.logo{
width:auto;
height:122px;
background:url(../images/logo.jpg) top no-repeat;
margin:auto;
padding:0;
}
Click the index.html tab in the Source Code window then Live button to see any changes
27. Add another division named as ‘redline’ on your index.html file as below; type
<div data-role="page" id="page">
<div class="logo"></div>
<div class="redline"></div> <- add this new tag line
28. Click the Style1.css tab in the Source Code window and type :
.redline{
width:100%;
height:38px;
background:#a70909;
margin:0;
padding:0;
}
Click the index.html tab in the Source Code window then Live button to see any changes
29. Add a new tag like below to wrap the logo and the redline:
<div class="header"> <- add this new tag line
<div class="logo"></div>
<div class="redline"></div>
</div> <- add this new tag line
3
30. Click the Style1.css tab in the Source Code window and type :
.header{
width:100%;
height:160px;
background:#ede2c4;
margin:0;
padding:0;
}
Click the index.html tab in the Source Code window then Live button to see any changes
31. While you’re in index.html source code, delete this tag lines:
<div data-role="header">
<h1>Page One</h1>
</div>
Click Live button to see any changes
32. Copy these tag lines in the index.html
<div class="header">
<div class="logo"></div>
<div class="redline"></div>
</div>
Paste the in the second page; Pub page
<div data-role="page" id="2pagePubs">
<div class="header">
<div class="logo"></div>
<div class="redline"></div>
</div>
Then delete the tag:
<div data-role="header">
<h1>Pubs</h1>
</div>
33. Repeat step 32 to the rest of the pages
34. Add a new class named "mainMenu" in the tag below inside index.html
<div data-role="content">
<ul data-role="listview" class="mainMenu"> <- add this new tag line
<li><a href="#2pagePubs">
4
35. Click the Style1.css tab in the Source Code window and type :
#page .mainMenu{
margin:5px;
padding:0;
}
#page .mainMenu li{
background:none;
border: none;
}
#page .mainMenu li a{
background: rgba(255,255,255,.6);
display:block;
border-radius:5px;
margin-bottom:5px;
}
#page .mainMenu li a:hover{
background: rgba(255,255,255,.9);
}
36. Go to the last line in your Style.css file and type:
#page {
background:url(../images/woodBG.jpg) repeat;
}
37. Save your Style1.css file and click Live button for the index.html file to see any changes.