0

2012 年 全國慈善/科技/人文網頁設計比賽暨行動 App 創作比賽

CmoreCloud App 操作手冊

Date： May， 2012

長茂科技股份有限公司

版權所有、翻印必究

1

**上傳競賽平台操作問題可洽** 聯絡人:王振生 email:cswang@dpark.im.thit.edu.tw 技術支援:沈佩真 email:kaylyn@emt.com.tw

一、以 Star Taipei App 為範例

(1) App 首頁： 本雲端平台 Cmore Cloud App 提供首頁 6 個按鈕功能定義，每一按鈕可看見

三層資料內容 ( 包含首頁 ) ，且具有個人化 App (地區化或主題化 App) 的功能，讓使用者可以更加快速方便了解當地的相關的資訊系統。

圖 1、 主題化 APP

2

(2)地區分類： 如食在台北 內容主要以介紹台北飲食資訊為主，讓使用者可以更快速找尋到台北的著名 小吃、餐廳資訊內容。

圖 2、食在台北

3

(3)內容資訊：

圖 3、台北-東區粉圓

4

二、後台內容建制

(1) 帳號登入： 此網址為：http：//pda.cmoremap.com.tw/admin_new/admin.php 帳號與密碼需與長茂科技申請(密碼登入後可進行修改)

圖 4、登入頁面

(2) 個人資料：

可變更所屬的密碼，請先輸入舊密碼在將新密碼打入即可。

圖 5、修改密碼圖

5

(3) 新增項目： 3.1 按下藍框新增項目後。則可在紅色框內新增按鈕項目名稱(如樂在台北等功能)。如下圖

圖 6、新增功能

圖 7、新增功能完成

6

3.2 新增資料內容： 按下「樂在台北」後 (藍色框) ，再按(紅色框)來新增資料內容主題 外網超連結 (紫色框)：如果在此處填上某 URL 網址 (例如

http://pda.cmoremap.com.tw) ，即代表 「樂在台北」等於 此 URL 網址 http://pda.cmoremap.com.tw，此按鈕將直接連結

http://pda.cmoremap.com.tw

圖 8、新增樂在台北內容

點選『內容文字背景設定』(紅色框)

1 2

圖 8-1、使用內建背景圖

3

①可選取系統設定的多種背景底圖

②可自行設計文字左方的 icon 小圖，自行上傳

③可自行設計背景圖，除系統設定可選取外

④可變更字型顏色，點選系統所列參考網站，若填上 FF00CC，字型顏色將改為

⑤可調整字型大小 (數字 1-40)

4 5

7

1

使用內建背景圖：選取喜愛的內頁作成襯底背景圖

圖 8-2、使用內建背景圖-底圖選項

8

②可自行設計文字左方的 icon 小圖，自行上傳

1

預覽：

2

①可選取系統設定的多種

背景底圖或自行設計上傳

④可變更字型顏色與⑤

顏色大小

圖 8-3、按鈕內容頁預覽

9

3.3 建立資料內容： 按下「新增樂在台北」後，會出現如下圖 9 所示。使用者可將所需的標題、 內容及圖片放入，「詳細資訊」為更多資訊的填入，可加入網址超連結 ( URL)， 讓使用者可以多了解一些相關資訊(如紅色框)。 如需在地圖上顯示出位置，打入地址後按下[確定]即會出現經緯度(如綠色框)，最後再按下最下方的[確定]即完成。

圖 9

圖 10、樂在台北相關資料建立

10

3.4 商家(景點)簡介： 完成以上的步驟後，點選預覽會，出現以下網頁畫面。

圖 11、商家簡介

11

3.5 修改 logo： 按下「樂在台北」後(藍色框) ，再按(紅色框)來修改 logo。如下圖

圖 12、修改 logo

對於六個新增項目(紅字框)，可用「文字」或「取代文字的大圖」來編輯設計，以利在首頁呈現。如下圖

圖 13、修改 logo 內頁

「文字」：可以編輯文字的顏色及字體大小。 「文字左方的小圖」： 在文字左方加一個小圖。

「取代文字的大圖」： 可自行設計一個 JEPG 格式的圖。如下圖

圖 14、取代文字的大圖

12

(4) 首頁版型： 目前提供直式及橫式兩種版型選擇

圖 15、首頁版型

13

(5)首頁排序： 項目名稱可依照個人的喜好來做編排版面，如圖所示填入數字越小的將在首頁上較

上方，但填入 0則按鈕隱藏。

圖 16、首頁排序

14

(6)首頁 banner ： 依照個人的喜好來做「首頁上方banner 」&「首頁背景圖置換」

圖 17、首頁 banner 修改

「首頁上方 banner」：如下圖(紅色框)

圖 18、首頁上方 banner

15

(7)首頁細部設定： 可依此調整首頁項目的版面距離及間距

圖 19、首頁細部設定

圖 20、首頁細部設定 App 畫面展示

1 2

3 4

1

3 4

2

16

( 8 )預覽功能： 所有的新增項目、內容資料建立、版型、排序、banner 等功能建立完成後， 可以使用「預覽」的功能來模擬手機上所呈現出來的情形，如果不符合您的預期 效果則可以再進行修改 。 點選「預覽」按鈕

圖 21、可預覽 App 畫面之按鈕

圖 22、App 首頁預覽畫面