編輯界面的使用說明示範2024-04

編輯界面的使用說明示範

第５課：Genial.ly互動網頁的神奇魔法

講師：張禕中、林子涵

前往探索

介面認識：建議依照數字順序認識

左邊功能欄介紹

免費圖庫

(與自行上傳圖片管理）

文字工具

免費素材庫

互動元素

智慧方塊

互動問答工具

頁面設定

內嵌外部內容

背景設定

元素功能列介紹：上鎖、群組、動畫、取代

上鎖

取代

動畫

群組

Entrance 進入

Exit 離開

Continuous 持續

Click 點擊

Hover mouse 游標經過

元素功能列介紹：互動

互動

提示

視窗

全螢幕

音效檔

前往某頁

超連結

顯現

隱藏

互動 - WINDOW

互動範例

互動 - Tooltip

出現小提示框

互動 - WINDOW

出現一個小視窗

互動 - GO TO PAGE

前往這份檔案的某一個頁面

互動 - LINK

前往不同網址的另外一個頁面

互動 - FULL SCREEN

把圖片類型的元素物件放大

互動 - AUDIO

按下按鈕後播放音效

互動範例

互動 - 顯現

按下按鈕後讓？？顯現

互動 - 消失

按下按鈕後讓小豬消失

互動 - 消失後再現

按一下按鈕後讓小豬消失 再按一下按鈕後讓小豬重新出現

互動範例

這一頁是GO TO PAGE指定的頁面

使用GO BACK

使用指定PAGE

內嵌外部內容範例

8種範例

</> iFrame

Facebook、Instagram

Google 地圖、Youtube

Canva 互動式簡報

Google 表單 問卷系統

HTML的iframe標籤，是讓A網站能夠嵌入B網站的內容，比如嵌入YouTube影音到網站中、嵌入FB貼文到網站中…等，都是非常多人使用且常見的案例。

Genial.ly本身 互動式網頁

Fliohtml5線上PDF 互動式電子書

Jigsaw Planet 拼圖小遊戲網頁

Ｗordwall 互動小遊戲

內嵌示範頁 - Google Map & Youtube

內嵌示範頁 - FB/IG社群頁面

內嵌示範頁 - Google表單

內嵌示範頁 - Canva

內嵌示範頁 - Fliphtml5

內嵌示範頁 - Genially本身

內嵌示範頁 - Wordwall

內嵌示範頁 - Jigsaw Planet

下方導覽設定列 與 右側設定面板介紹

Canvas 畫面比例設定

Navigation 導覽方式設定

Transitions 換頁方式設定

增加一個頁面

顯示比例

目前所在頁面

配色設定

刪除本頁面

右側設定面板介紹

Canvas 畫面比例設定

右側設定面板介紹

Transitions 換頁方式設定

右側設定面板介紹

Navigation 導覽方式設定

基本簡報

影片播放

微型網站

最上方系統工具列

系統工具列第二行特殊功能介紹

位置

顏色

透明度

排列

系統工具列第二行特殊功能介紹

裁切

遮罩

拖曳

對齊

僅限圖片

輸入四位數的密碼才能打開，這邊是測試頁面密碼是1234

4位數字

請輸入密碼進行解鎖

很白痴的四碼數字

更進階功能可以去拿學到？

中文臉書社團

原文模板資料庫

可以簡單搜尋，建議用英文

有靜態圖庫跟GIF動態圖庫

可以自行上傳素材 管理檔案，但最大檔案就是10MB

可以自行設定品牌套件(付費功能)

• 各類預設好的文字範本選項
• 目前不支援其他中文字體
• 有AI文字編輯助理

插畫

搜尋

剪影素材

圖示

互動式圖表

形狀

表格

指引線條

Lorem ipsum dolor

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.
• Labore et dolore magna aliqua.

Lorem ipsum dolor sit

外嵌圖片

外嵌音檔

外嵌影片

基本互動 按鈕設定

互動範本

各式小工具

互動圖表

按鈕範本庫

互動範圍

Lorem ipsum dolor

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.
• Labore et dolore magna aliqua.

Lorem ipsum dolor sit

常見問答範本

AI輔助創建互動問答

背景設定分層兩層

(1)Canvas畫面範圍的背景設定

(2)Base整個網頁範圍的背景設定

檔案共享狀態

這份檔案的雲端共享狀態設定 三種模式

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor sit

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.
• Labore et dolore magna aliqua.