Part 3 Mobile Apps
Part 3 Mobile Apps
1
Design simple app with Dreamweaver CS6 – Part 3
(Adding User Interface (UI) to calculate user rating)
A) CREATE A NEW PAGE
1. Open DW and make sure that your site in the Site panel is the same site that you have worked before (during our lab on 16 April 2017)
2. Double click file index.html from your site panel to open it
3. Look at your source code; find a comment entitled <!-- End Page Map --> such as the image below
4. Place your cursor at the new line after the comment so that we can enter a new page
5. Write 2 new comments at the new line such as below:
<!-- Start Page Rate -->
<!-- End Page Rate -->
Look at the image to help you writing the comment
6. We are going to insert the new code between the comments as we did in step 5. Place your cursor between the start and end comment
7. Go to the Insert panel at the top right of DW window and find Page item to insert a new page. Look at the image below to help you
Click this Page item
2
8. Type “pageRate” as the page id then click OK to create the new page
9. Change the page header in the code from <h1>Header</h1> to become <h1>Rate us</h1>. Your new page code will be like this
<div data-role="page" id=" pageRate ">
<div data-role="header">
<h1>Rate us</h1>
</div>
<div data-role="content">Content</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
B) ADD SELECT MENU TO THE NEW PAGE
1. Go to this code <div data-role="content">Content</div>. Delete the word “Content” and bring down the </div> to so that it is parallel to the <div> tag like below.
<div data-role="content">
</div>
2. We are going to insert a new Select Menu item between the codes as shown in step 1. To insert the Select Menu, click the “Select Menu” Item in the Insert panel at the top right of DW display.
3. DW will insert code that relate to Select Menu into your code panel. Change the Select Menu Code to be like the code below.
<!-- Start Select Menu -->
<div data-role="fieldcontain" id="notation" >
<form>
<label for="selectmenu" class="select">Choose the restaurant</label>
<select name="selectmenu" id="selectmenu">
Click this Select Menu item
3
<option value="option1">Le Mouffetard</option>
<option value="option2">Chocolate bar</option>
<option value="option3">Restaurant Diona</option>
<option value="option4">Tai Shan</option>
<option value="option5">Arcade</option>
</select>
</form>
</div>
<!—End Select Menu -->
4. Save your file. We have just finished building the new Rate page.
5. Scroll up to code until you find the Restaurant page code. The image comment like below can help you finding the page.
6. Scroll down a little bit until you reach the code to insert a new button for “Find Us” function such as below.
<p><img src="../images/restaurantMaps.jpg" width="300" height="301"></p
<p><a href="#pageMaps" data-role="button" data-icon="plus">Find us</a></p>
</div>
7. Place your cursor after the </div> code as shown in step 6. Type <hr/> to insert a line. Your code will be like this:
<p><img src="../images/restaurantMaps.jpg" width="300" height="301"></p
<p><a href="#pageMaps" data-role="button" data-icon="plus">Find us</a></p>
</div>
<hr/>
8. Place your cursor after <hr/> code and go to the Insert Panel at the top right of DW display and click Button item as shown below
Find this comment
4
9. Select this properties for the button. Click OK.
10. Change the insert button code that you just entered to become like this:
<!--Start Rate button-->
<p><a href="#pageRate" data-role="button" data-icon="plus">Rate us</a></p>
<!--EndRate button-->
11. Save your file and test the new page using a web browser. You should get the Select Menu working such as the image below.
Click this Button item
Select Menu item
5
C) ADD SLIDER TO THE NEW PAGE
1. Refer to step 3 in the ADD SELECT MENU TO THE NEW PAGE. Put your cursor after the line <!—End Select Menu -->. Look at the image below.
2. Go to the Insert Panel which is located at the top right of DW display and click the Slider item. Look at the image below:
DW will insert the following code into your source panel: (NOTE: If DW did not insert this code, copy these codes and paste it at the line as mentioned in step 1)
<div data-role="fieldcontain">
<label for="slider">Value:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
Put your cursor here
Click Slider item
6
3. Change the codes in step 2 to become like this: (Note: You can delete code in step 2 and replace them with these codes)
<!--Start of Slider-->
<div> <h2>Slide to rate</h2></div>
<div> <h3>0 = Terrible : 10 = Excellent </h3></div>
<div data-role="fieldcontain">
<label for="slider">Food taste and presentation:</label>
<input type="range" name="slider" id="sliderFoodTaste" value="5" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider">Food Price:</label>
<input type="range" name="slider" id="sliderFoodPrice" value="5" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider">Customer Service:</label>
<input type="range" name="slider" id="sliderCustomer" value="5" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider">Restaurant Condition:</label>
<input type="range" name="slider" id="sliderRestaurant" value="5" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider">Overall imression:</label>
<input type="range" name="slider" id="sliderOverall" value="5" min="0" max="10" />
</div>
<!--End of Slider-->
4. Save your file and preview them in Browser. Your page will be like the image below. The slider is not aligned well.
7
5. To solve the unaligned slider, you need to create some CSS code. To do that, click the style1.css tab beside the source code panel at the top of the source panel. This will open the CSS code for your project. Look at the image below:
6. Go to the last line of your CSS code and add the codes:
label{
float:left;
width:250px; //whatever width that suits your needs
}
The codes will look like this in your CSS file:
7. Save style1.css file and your index.html file. Preview your page in Browser.
D) ADD SUBMIT BUTTON TO THE NEW PAGE
1. Switch back to your Source Code Panel to see your html code back
2. Go to the line after the code <!--End of Slider--> , refer to Step 3 in ADD SLIDER TO THE NEW PAGE.
3. Go to Insert panel and click button.
Click style1.css to open the css code
Click this Button item
8
4. Select this properties for the button. Click OK.
5. Your button codes will look like this:
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Button</a>
Change the above code to be like this:
<!--Start of Submit Button-->
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Submit</a>
<!--End of Submit Button-->
6. Save your file and preview them in Browser. You should get something like this:
Submit Button
Select menu
Slider
9
1
Design simple app with Dreamweaver CS6 – Part 3
(Adding User Interface (UI) to calculate user rating)
A) CREATE A NEW PAGE
1. Open DW and make sure that your site in the Site panel is the same site that you have worked before (during our lab on 16 April 2017)
2. Double click file index.html from your site panel to open it
3. Look at your source code; find a comment entitled <!-- End Page Map --> such as the image below
4. Place your cursor at the new line after the comment so that we can enter a new page
5. Write 2 new comments at the new line such as below:
<!-- Start Page Rate -->
<!-- End Page Rate -->
Look at the image to help you writing the comment
6. We are going to insert the new code between the comments as we did in step 5. Place your cursor between the start and end comment
7. Go to the Insert panel at the top right of DW window and find Page item to insert a new page. Look at the image below to help you
Click this Page item
2
8. Type “pageRate” as the page id then click OK to create the new page
9. Change the page header in the code from <h1>Header</h1> to become <h1>Rate us</h1>. Your new page code will be like this
<div data-role="page" id=" pageRate ">
<div data-role="header">
<h1>Rate us</h1>
</div>
<div data-role="content">Content</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
B) ADD SELECT MENU TO THE NEW PAGE
1. Go to this code <div data-role="content">Content</div>. Delete the word “Content” and bring down the </div> to so that it is parallel to the <div> tag like below.
<div data-role="content">
</div>
2. We are going to insert a new Select Menu item between the codes as shown in step 1. To insert the Select Menu, click the “Select Menu” Item in the Insert panel at the top right of DW display.
3. DW will insert code that relate to Select Menu into your code panel. Change the Select Menu Code to be like the code below.
<!-- Start Select Menu -->
<div data-role="fieldcontain" id="notation" >
<form>
<label for="selectmenu" class="select">Choose the restaurant</label>
<select name="selectmenu" id="selectmenu">
Click this Select Menu item
3
<option value="option1">Le Mouffetard</option>
<option value="option2">Chocolate bar</option>
<option value="option3">Restaurant Diona</option>
<option value="option4">Tai Shan</option>
<option value="option5">Arcade</option>
</select>
</form>
</div>
<!—End Select Menu -->
4. Save your file. We have just finished building the new Rate page.
5. Scroll up to code until you find the Restaurant page code. The image comment like below can help you finding the page.
6. Scroll down a little bit until you reach the code to insert a new button for “Find Us” function such as below.
<p><img src="../images/restaurantMaps.jpg" width="300" height="301"></p
<p><a href="#pageMaps" data-role="button" data-icon="plus">Find us</a></p>
</div>
7. Place your cursor after the </div> code as shown in step 6. Type <hr/> to insert a line. Your code will be like this:
<p><img src="../images/restaurantMaps.jpg" width="300" height="301"></p
<p><a href="#pageMaps" data-role="button" data-icon="plus">Find us</a></p>
</div>
<hr/>
8. Place your cursor after <hr/> code and go to the Insert Panel at the top right of DW display and click Button item as shown below
Find this comment
4
9. Select this properties for the button. Click OK.
10. Change the insert button code that you just entered to become like this:
<!--Start Rate button-->
<p><a href="#pageRate" data-role="button" data-icon="plus">Rate us</a></p>
<!--EndRate button-->
11. Save your file and test the new page using a web browser. You should get the Select Menu working such as the image below.
Click this Button item
Select Menu item
5
C) ADD SLIDER TO THE NEW PAGE
1. Refer to step 3 in the ADD SELECT MENU TO THE NEW PAGE. Put your cursor after the line <!—End Select Menu -->. Look at the image below.
2. Go to the Insert Panel which is located at the top right of DW display and click the Slider item. Look at the image below:
DW will insert the following code into your source panel: (NOTE: If DW did not insert this code, copy these codes and paste it at the line as mentioned in step 1)
<div data-role="fieldcontain">
<label for="slider">Value:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
Put your cursor here
Click Slider item
6
3. Change the codes in step 2 to become like this: (Note: You can delete code in step 2 and replace them with these codes)
<!--Start of Slider-->
<div> <h2>Slide to rate</h2></div>
<div> <h3>0 = Terrible : 10 = Excellent </h3></div>
<div data-role="fieldcontain">
<label for="slider">Food taste and presentation:</label>
<input type="range" name="slider" id="sliderFoodTaste" value="5" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider">Food Price:</label>
<input type="range" name="slider" id="sliderFoodPrice" value="5" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider">Customer Service:</label>
<input type="range" name="slider" id="sliderCustomer" value="5" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider">Restaurant Condition:</label>
<input type="range" name="slider" id="sliderRestaurant" value="5" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider">Overall imression:</label>
<input type="range" name="slider" id="sliderOverall" value="5" min="0" max="10" />
</div>
<!--End of Slider-->
4. Save your file and preview them in Browser. Your page will be like the image below. The slider is not aligned well.
7
5. To solve the unaligned slider, you need to create some CSS code. To do that, click the style1.css tab beside the source code panel at the top of the source panel. This will open the CSS code for your project. Look at the image below:
6. Go to the last line of your CSS code and add the codes:
label{
float:left;
width:250px; //whatever width that suits your needs
}
The codes will look like this in your CSS file:
7. Save style1.css file and your index.html file. Preview your page in Browser.
D) ADD SUBMIT BUTTON TO THE NEW PAGE
1. Switch back to your Source Code Panel to see your html code back
2. Go to the line after the code <!--End of Slider--> , refer to Step 3 in ADD SLIDER TO THE NEW PAGE.
3. Go to Insert panel and click button.
Click style1.css to open the css code
Click this Button item
8
4. Select this properties for the button. Click OK.
5. Your button codes will look like this:
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Button</a>
Change the above code to be like this:
<!--Start of Submit Button-->
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Submit</a>
<!--End of Submit Button-->
6. Save your file and preview them in Browser. You should get something like this:
Submit Button
Select menu
Slider
9
Comments
Post a Comment