期末作業說明

期末手機app作業說明

my_app.aia 用最簡單的設計，規劃手機與網站的連結，充分發揮
手機的便捷性與網頁的靈活性。同學在十分鐘內就能完成期末app作業。

1. 下載my_app.aia
2. 登入App Inventor2 (程式平台)
3. 上傳my_app.aia
4. 版面配置如下:

畫面編排規畫四組按鈕元件:
Button_network (首頁)
Button_news       (消息)
Button_share        (分享)
Button_end         ( 結束)

再加入webview 元件，作為按鈕連網路的界面。

程式設計非常簡單，當初始化及首頁按鈕被點選時，分別連上你網站的網址首頁就完成。
消息及分享元件分別對應到相關網頁。

(標題及app名稱改成app_ooo，ooo為座號，圖示改成你上傳的手機 icon 檔案)

程式中網址請改為https://joynews99.com/pc02/xxx/    xxx為你的座號

最後打包為my_app.pak，下載到手機安裝或手機掃描QRcode安裝。

網站內容自行規劃，完成後撰寫期末書面報告。

(下載app作業報告(空白)

1.本表填妥列印，於學期最後一次上課時，交由班代排序彙整繳交，逾期不收。
2.App請安裝於手機，截圖後置於網站my_app.htm網頁(手機首頁)。

首頁範例 index.htm

消息範例 app_news.htm

分享範例 app_share.htm

my_app.apk 圖案請自行設計

　

網頁設計小秘訣

返回上頁
<input onclick="history.go( -1 );return true;" type="button" value="上頁back" style="background-color: #C0E3B5">
　

手機畫面規劃

01 傾聽 02:28

手機網頁設計應用(架構範例)
美廣地圖	健康教室	地中海餐

<table width="320" >
<tr>
<td colspan="3">
<img border="0" src="images/title.jpg" width="320" height="60"><br><br>
<b><font size="4" color="#0000FF">手機網頁設計應用(架構範例)</font></b>
　</td>
</tr>
<tr>
<td width="100">
<p align="center">
<a href="map.htm">
<img border="0" src="images/map_01.jpg" width="48" height="48"></a></font></b>
美廣地圖</td>
<td width="100">
<p align="center">
<a href="course.htm">
<img border="0" src="images/dance.gif" width="48" height="48"></a></font></b>
健康教室</td>
<td width="100">
<p align="center">
<a href="food.htm">
<img border="0" src="images/food_05.jpg" width="53" height="48"></a></font></b>
地中海餐</td>
</tr>
</table>