app期末網站設計流程 (下學期)

1.由教學網站首頁下載homework02.zip 壓縮
   檔,解壓縮後homework02資料夾內容如下:



    images 資料夾:置放圖片檔。

    05 06  資料夾:置放該月每日訊息。

下載app範例原始檔(homework02.zip)

2.點選 index.htm,顯現示範網站首頁:



分享專區的頁面如下:




3.參考示範網頁規劃你網站名稱、內容及首
   頁顯示的圖片 、各網頁所需的圖片。
   (設計適合在手機顯示的主題)

4.將收集的圖片縮減至適當大小
   (以小於100K為原則)

一般圖片寬度320點為宜,小圖示60x60為宜,(手機螢幕大小)

如原始圖片過大,請以FreeImageRsizer 軟體修正後存檔 。

下載/FreeImageResizer

為提高手機連網效率,圖片不宜直接貼圖或拿數位照片使用。(檔案過大)

5.將所有圖片檔存於 images 資料夾
  (請以英文檔名存檔,注意副檔名有大小
    寫區分)

6.開始修改示範網頁內容或自行設計網頁。
   (以KompoZer,記事本,notepad++或其他
    網頁編輯軟體皆可)



下載/KompoZer

網頁示範原始檔說明

7.將<title>舊名稱</title>改成網頁的名稱。
       <title>新名稱</title>

8.網頁修改完成後另存新檔。
   (英文檔名為宜)

9.注意每個網頁皆要有回上頁的功能。
   html 指令如下:

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

10.網頁設定顯示範圍為320點。
<table  width="320" >(無線框)>
   (網頁內容)
</table>
<table border="1" width="320" >(顯 示線框)
   (網頁內容)
</table>

11.首頁請以 index.htm 為檔名

12.請在桌機或筆電上執行 index.htm ,測試
    網站功能皆能順利執行。

13.測試無誤後,將<homework2>資料夾所有檔案以FileZill 上傳至老師提供的指定網    頁空間。(座號資料夾)。

下載FileZilla

資概網頁空間使用說明

14.上傳完成後你的網站網址為
     https://joynews99.com/pc02/***/   
    (***為座號)   

15.點選全班網站,檢查能否順利執行。

全班網頁作業

示範個別網頁原始碼

16.最後以Inventor2 設計手機app來連接你的
     網站首頁及其他網頁。

手機app設計說明(my_app.htm)

17.將你設計的 my_app.pak 安裝於手機,檢
     查是否能順利執行,如果有問題,請再
     回頭查驗那一步驟有問題。

18.恭喜你完成本學期的程式設計實作!

19.請完成學期成果報告,列印紙本後於最
     後一堂課繳交。  (逾期不收)

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

學期成績評分準則

手機網頁設計範例

手機app範例執行畫面

my_app.apk安裝後畫面



網站首頁,採用小圖片及小動畫



分享資源,使用PHP 及 MySQL資料庫




 
app_news.htm   最新消息,table 應用