Transcript 下載/瀏覽

數位教材製作
－教學影片－
4a1f0018
4a1f0052
4a1f0084
4a1f0103
徐 敏、4a1f0041 蔡佩芬
鄭茗仁、4a1f0081 凃顗喬
許珈瑜、4a1f0090 劉奕辰
林宜靜
錄影教學
結合不同軟體來建構基本型網站
影片外連：
https://drive.google.com/a/stust.edu.tw/folde
rview?id=0B4UNVrNYi_bfZHE4a2VFZFhYVDA&
usp=sharing#list
教材主題
特性與優缺點分析
利用直接錄下製作網頁操作過程，讓學
習者不被空間與時間所限制住。
例如：可以利用下班後，在家裡的閒暇時
間做學習。
教材主題
特性與優缺點分析
優點：
學習者如果遇到比較不清楚的地方，可
以重複去播放比較不了解的片段以熟悉操方
式。
教材主題
特性與優缺點分析
缺點：
比起有老師直接教學，錄影教材的方式
在於教學操作方法上會比較侷限，假如學習
者遇到影片說明之外的問題便無法即時的去
解決。
教材主題
內容資料收集與分析
參考目前市面上及圖書館內有關網頁製
作入門教學 ，還有網路上所分享的教學影片，
經過整理統整出真正能讓初學者一看就懂的
內容 ，將多種ADOBE系列軟體一次運用，做
出容易學習簡單基本網站架構。
教學設計方式
使用最為常見、較熟悉的ADOBE系列的
軟體PHOTOSHOP、DREAMWEAVER、FLASH
製作網站，搭配語音教學影片方式，讓學習
者能夠容易理解。
教學設計方式
教學者每個步驟也會詳細告知方法，讓
學習者更好上手。
三個影片介紹三種不同軟體製作網站，也能
趁機學習到各個軟體的基本操作。
自製教材流程（一）
O CSS樣式的使用
開新網站開啟新的CSS樣式表進入首頁，
連結CSS樣式
自製教材流程
觀察參考範例 插入Div標籤 輸入ID標
籤 設定背景 圖片資料建議存於同一
資料夾 方框大小建議用百分比(%)表示
設定網站分塊大小，視照片素材而定 若
區塊想設製在網頁中間可設定AUTO參數
自製教材流程
確認參考網頁所需版型 插入表格分別放
置頁首5個按鈕 CSS樣式可設定背景顏色
若無法在版面上插入Div標籤可在分割內搜
尋標籤位置 CSS樣式也可設定字型樣式
若想再字行之間空一行顯示可輸入<br>來執
行 完成
自製教材流程（二）
O 網頁分割
開啟已設計好檔案 開啟尺標工具，以便
拉取尺標 從上方與左方的尺標工具可以
拉取我們所需的尺標 切好所需分割之區
塊
自製教材流程
使用切片工具，切割每一個方框切割完成，
儲存成網頁用檔建議網頁與圖片檔案都儲
存下來儲存完成會有影像字料夾及網頁檔
案
自製教材流程
在Dreamweaver內開啟時，圖像依然完整，
且可各區塊分離做超連結
自製教材流程（三）
O Flash影片匯入Dreamweaver
在Dreamweaver內點取要插入影片的地方
自製教材流程
插入影片，因使用是Flash影片故選擇SWF選
項完成
多媒體數位教材工具
評估與選用
ADOBE系列軟體是基本、廣為人知、而
大家也較於常使用的軟體，學習者而在製作
網站會比較容易，即使是初新者，ADOBE系
列軟體也很好學習，所以是錄製教材工具的
首選。
組員分工表
O 影片製作：徐敏、鄭茗仁
O PTT製作：凃顗喬、林宜靜、許珈瑜
O 影片內容步驟文字：蔡佩芬
O 上台報告：劉奕辰
時間分析
O 影片製作 １段影片 約 ２天製作
O PTT製作 全部製作完成 約 ３天完成
O 影片內容步驟文字 ２天完成
OEnd