展示性与互动性多媒体教学网页制作

展示性與互動性多媒體教學網頁製作中華民國九十一年一月23日至25日主講：吳榮芳1多媒體教材腳本(Storyboarding)撰寫

編寫與修正主要內容（writeandreviseprimarytext）編寫與修正次要內容（writeandrevisesecondarytext）腳本製作（producestoryboards）檢查覆蓋顯示是否適當（checkthefitofoverlayingdisplays）繪製與修改圖形顯示及計畫其他輸出（drawandrevisegraphicdisplaysandplanotheroutput）檢查圖形顯示與文字顯示是否適當（checkgraphicsandsimultaneoustextforfit）檢查流程圖與腳本（reviewtheflowchartsandstoryboards）2多媒體教材腳本(Storyboarding)撰寫3多媒體教材腳本(Storyboarding)撰寫整體流程說明課程軟體腳本設計卡單元名稱畫面畫面設計說明流程說明操作說明檔名4網頁製作工具介紹網頁基本組成背景(顏色、圖、聲音)文字(字型、大小、顏色)影像(靜態圖片、動態圖片、動態影片)聲音(wav,mp3,mid,au…)超連結內嵌物件5網頁製作工具介紹背景(顏色、圖、聲音)格式背景背景圖背景顏色背景音樂6網頁製作工具介紹文字(字型、大小、顏色)文字工作列7網頁製作工具介紹影像(靜態圖片、動態圖片)影像(動態影片)8網頁製作工具介紹聲音(wav,mp3,mid,au…)9網頁製作工具介紹超連結相對路徑為避免連結路徑錯誤，請將檔案放至於工作資料夾輸入相同資料夾之檔名。子資料夾子資料夾/檔名上一層資料夾../檔名絕對路徑(完整網址)http://xxx.xxx.xxx.xxx書籤連結同一網頁之不同位置。10網頁製作工具介紹超連結直接輸入絕對網址http://aaa.bbb.ccc.ddd或相對網址直接選取檔名。選取相對路徑檔名連結至書籤11網頁製作工具介紹超連結(書籤)先選取欲標記書籤位置插入書籤輸入書籤名稱或使用預設值12網頁製作工具介紹內嵌物件插入Web元件<embedsrc=…>13聲音素材的擷取MP3,Wav,Mid,au…CoolEdit200014圖形素材的擷取使用PhotoImpact+數位相機+掃描器亮度與對比百寶箱15互動性網頁製作用戶端執行使用Script：JavaScript，VBScript，Flash等伺服器端執行使用ASP，PHP，JSP，Perl，CGI。網頁連結16互動性網頁製作JavaScript簡介:Script語言的專用控制標籤(Tags)如下：<scriptlanguage="Javascript">

．

．

Script程式

．

．

</script>函式語法

:function函數名稱(參數變數1,參數變數2,){

敘述

}

eg:functionfun(a1,a2){ a=a1;}函式呼叫函數名稱(參數值1,參數值2,);

Eg:fun(10,20);17互動性網頁製作常用的事件

事件用途說明滑

鼠

事

件onclick在網頁中按了滑鼠按鍵一下時啟動

ondblclick在網頁中雙按滑鼠按鍵時啟動

onmousedown在網頁中按下滑鼠按鍵時啟動

onmousemove滑鼠在網頁中移動時啟動

onmouseout滑鼠移出網頁時啟動

onmouseover滑鼠移入網頁時啟動

onmouseup在網頁中放開滑鼠按鍵時啟動

ondragstart在網頁中拖曳物件時啟動

onselectstart在網頁中選取物件時啟動

鍵

盤

事

件onkeydown按下鍵盤按鍵時啟動如按住不放，只啟動一次。onkeypress按下鍵盤按鍵時啟動如按住不放，則一直啟動。onkeyup放開鍵盤按鍵時啟動

18互動性網頁製作直接使用JavaScript語法例：onclick事件onclick=函式名稱例如:按下後撥放聲音functionplaysound(id){

document.embeds[id].play();}．．．<embedname="s1"src="s1.mp3"autostart=falsehidden=true>．．．<imgborder="0"src="19.gif"name="p19"style="cursor:hand"onmouseover="convertcolor(9)"onmousedown="playsound(9)"onmouseout="stopplaysound(9)"width="137"height="45">定義函式內嵌聲音物件滑鼠按下撥芳內嵌聲音物件19網頁教材上傳使用CuteFtp與FrontPage請參閱