01 Google Web Designer與HTML5

1.1 網頁面臨問題

1.2 HTML5的到來

1.3 Google Web Designer介紹

1.4 下載與安裝



02 基本介紹

2.1 可建立的專案類型

2.2 操作介面

2.3 設定環境

2.4 預覽與發佈



03 工具的使用與屬性面板

3.1 可使用工具介紹

3.2 選取範圍工具的使用

3.3 3D物件旋轉工具與轉譯工具

3.4 標記工具與屬性

3.5 繪圖工具與屬性

3.6 文字工具與屬性

3.7 填滿工具與屬性

3.8 3D旋轉中心

3.9 使用CSS面板變更樣式

3.10 認識頁面



04 互動元件

4.1 介紹

4.2 輕按區域

4.3 手勢

4.4 按鈕輕按通話

4.5 滑動式圖片庫

4.6 輪轉式圖片庫

4.7 360度圖片庫

4.8 影片

4.9 YouTube

4.10 地圖

4.11 iFrame



05 動畫

5.1 快速模式

5.2 快速模式動畫練習

5.3 進階模式

5.4 進階模式動畫練習

5.5 關於加減速



06 添加事件、標記、標籤

6.1 將事件新增至元件

6.2 將事件標記和事件標籤新增至時間軸

6.3 事件與標籤組合練習



07 範例實作：商品介紹

7.1 建立新檔案

7.2 新增頁面

7.3 頁面一製作

7.4 頁面二製作

7.5 頁面三製作

7.6 發佈專案



08 範例實作：圖片控制

8.1 建立新檔案

8.2 大圖素材佈置

8.3 小圖素材佈置

8.4 新增小圖的控制事件

8.5 大圖的進階設定

8.6 增加向左與向右按鈕控制

8.7 發佈專案



09 範例實作：3D賀卡

9.1 建立新檔案

9.2 Banner page頁面素材佈置

9.3 Expanded page頁面素材佈置

9.4 Expanded page頁面卡片旋轉動畫設定

9.5 時間軸事件設定

9.6 發佈專案



10 網頁空間－Lionfree

10.1 何謂網頁空間

10.2 免費虛擬主機Lionfree介紹與註冊

10.3 網頁上傳



11 QR-Code製作

11.1 QR-Code介紹

11.2 關於QR-Hacker

11.3 QR-code製作

11.4 掃描QR-code



12 利用YouTube製作與剪輯影片

12.1 關於YouTube Video Editor

12.2 商品之影片設計

12.3 影片與照片之剪輯