SECE – 資訊科技培訓工作坊

Size: px

Start display at page:

Download "SECE – 資訊科技培訓工作坊"

监儡柏
5 years ago
Views:

1 香港教育學院幼兒教育學院 SECE 資訊科技培訓工作坊 Macromedia Dreamweaver 4 進階篇工作坊 (8) 第 1 頁, 共 15 頁

2 目錄香港教育學院 ( 幼兒教育學院資訊科技培訓工作坊 ) 香港教育學院 - 幼兒教育學院 : 資訊科技培訓工作坊 ( ) 1 目錄 2 第一部分 Dreamweaver 術語 3 第二部分 Dreamweaver 的介紹 4 1. 加入圖片 4 A. 加入隨指標變換 (Rollover) 的圖片 4 B. 製作影像地圖 4 C. 修改與刪除影像地圖的連結區域 5 2. 加入多媒體軟件 6 A. 加入 Flash 按鈕 6 B. 加入 Flash 文字 7 3. Layer 8 A. 加入 Layer 8 B. 在 Layer 中加入內容 8 C. 更改 Layer 的名稱 8 D. Layer 的顯示與隱藏 8 4. Timeline 9 A. 用 Layer 及 Timeline 製作動畫 9 B. 曲線路徑製作跳頁式連結選單 11 A. 插入跳頁式選單 (Jump Menu) 11 B. 修改跳頁式選單的內容 Frame 13 A. 分割 Frame 13 B. 加入 Frame 13 C. 儲存 Frame 14 D. Frame 的屬性設定 14 E. Frame 名稱的功用 14 第 2 頁, 共 15 頁

3 Dreamweaver 術語香港教育學院 ( 幼兒教育學院資訊科技培訓工作坊 ) 首頁 ( Home Page/Index Page) 所謂首頁, 是指由網址進入時第一個看到的畫面便是首頁在首頁上通常都會將所有資訊清楚的放在這個頁面上, 目的就是為了使瀏覽者在使用這個網頁時能快速地連結到需要的資料檔案傳輸協定 (FTP) FTP 是 File Transfer Protocol 檔案傳輸協定的縮寫, 是 Internet 上的一個重要的運用工具利用 FTP 專用程式軟體, 在收送兩端電腦建立連線後, 會將程式檔案自動切割成一小塊一小塊, 透過檔案傳輸協定在 Internet 上傳送, 然後由接收端再將檔案重新組合起來, 以達成檔案傳遞的目的圖層 (Layer) 你可以把它想像成 Word 文書編輯器裡的圖形框或插入的圖形檔案, 在圖層當中我們可以加入文字或是圖片等等, 同時各個圖層是可以互相重疊的, 每一個圖層就是一個獨立的區塊, 學理一點說, 圖層就是三度空間的物體, 也就是說, 在一般的網頁中只有 X 與 Y 軸的平面, 但是當我們使用圖層之後, 網頁將不只是 XY 的平面而變成了具有 XYZ 三軸向的立體空間時間軸 (TimeLine) 是一個類似計時器的物件, 類似 Visual Basic 或是其他程式撰寫工具裡的 Timer 元件, 它是用來觸發程式運作的關鍵元件, 例如 : 網站中的廣告圖片輪流播看板, 就是在網頁中固定的位置上每隔一段時間就輪流播放不同的廣告圖片 Rollover 圖片當滑鼠移到圖片上, 但不按下滑鼠的左鍵時, 此情況即稱為 Rollover, 因此 Dreamweaver 將這種變換式的圖片稱為 Rollover Image 影像地圖 (Image Map) 影像地圖 (Image Map) 是網頁上常見的超連結技巧, 瀏覽者在圖片上的不同位置按下滑鼠的左鍵, 就會分別連到不同的地方 Frame 簡單來說, 將一個完整的網頁視窗切割成不同的區域, 以放置不同的內容, 就稱為 Frame 在 Frame 效果中, 我們稱每一塊分割的區域都是一個 Frame, 而這些 Frame 的集合, 就稱為 Frameset 第 3 頁, 共 15 頁

加入圖片 A. 加入隨指標變換 (Rollover) 的圖片 1. 首先準備兩張大小相同的圖片, 一張是滑鼠還沒有移上去時的狀態, 另一張是滑鼠移上去後的圖片 2.

在 Original Image 按 Browse 按鈕來指定原始的圖片如左圖 6. 在 Rollover Image 指定滑鼠移上去後的圖片 7.

4 加入圖片 A. 加入隨指標變換 (Rollover) 的圖片 1. 首先準備兩張大小相同的圖片, 一張是滑鼠還沒有移上去時的狀態, 另一張是滑鼠移上去後的圖片 2. 按下 Object 面板 Common 類別中的 Insert Rollover Image 按鈕 3. 就會出現如左圖的 Insert Rollover Image 對話視窗 4. 在 Image Name 欄位輸入圖片的代號 ( 不是檔名 ), 採取預設值即可, 但留意不能與其他圖片重複 5. 在 Original Image 按 Browse 按鈕來指定原始的圖片如左圖 6. 在 Rollover Image 指定滑鼠移上去後的圖片 7. 然後在 When Clicked, Go To URL 欄位輸入按下圖片後所連結到的網址如 : 8. 最後按下 OK 按鈕 9. 按下鍵盤上的 F12 按鈕來預覽 Rollover Image 的效果 B. 製作影像地圖 1. 選取一張圖片, 在 Properties 面板上選取一種形狀工具 ( 粉藍色的 ) 第 4 頁, 共 15 頁

ied.edu.hk,http://www.ied.edu.hk/sece 及 http://www.yahoo.com.hk, 並且都以開啟新視窗的方式顯示 2.

5 2. 然後在圖片上拖曳出一個要做成連結的範圍, 如左圖, 所拖曳出的區域會呈現藍色半透明狀態 3. 在 Properties 面板的 Link 欄位中指定超連結的位址便可 4. 另外在 Alt 欄位則可輸入該區域的說明文字 C. 修改與刪除影像地圖的連結區域 1. 要刪除或修改已畫出的連結區域前, 先按下 Properties 面板的實習題 : 1. 請在 Dreamweaver 中開啟新的空白網頁, 然後任意插入一張圖檔, 再依下列敘述設定影像地圖 : i. 在圖中任選 3 處, 以影像地圖方式分別設定超連結至及並且都以開啟新視窗的方式顯示 2. 請在 Dreamweaver 中開啟新的空白網頁, 然後用 2 個大小相同的圖檔, 再依下列敘述進行插入與修改 Rollover 圖片 : 1. 請利用 2 個大小相同的圖檔製作 Rollover 圖片 ( 一個為原始圖片, 另一個為滑鼠移上去後的圖片 ) 按鈕, 令指標變回箭頭的樣式, 這樣便可選取連結區域 2. 然後按下鍵盤上的 Delete 鍵, 即可刪除此連結區域第 5 頁, 共 15 頁

出現如左圖的 Insert Flash Button 對話視窗先在 Style 選擇按鈕的樣式 4. 然後在 Button Text 輸入按鈕的文字 5.

6 加入多媒體軟件 A. 加入 Flash 按鈕 1. 將插入點移到要插入按鈕的地方 2. 按下 Object 面板 Common 類別中的 Insert Flash Button 按鈕 3. 出現如左圖的 Insert Flash Button 對話視窗先在 Style 選擇按鈕的樣式 4. 然後在 Button Text 輸入按鈕的文字 5. 再在 Font 選擇字型 6. 接著在 Size 輸入按鈕文字的大小 7. 在 Link 的位置輸入超連結的位置 8. 可以在 Bg Color 選擇按鈕背景色 9. 然後在 Save As 位置輸入這個 Flash 按鈕的名稱與路徑便可 10. 最後按下 OK 按鈕便完成第 6 頁, 共 15 頁

接著可在 Color 及 Rollover Color 選取文字的色彩及當滑鼠移上去文字時的色彩 6. 在 Text 輸入文字 7. 在 Link 欄位選取超連結的位置 8. 可以在 Bg Color 選擇文字的背景色 9.

7 B. 加入 Flash 文字 1. 將插入點移到要插入文字的地方 2. 按下 Object 面板 Common 類別中的 Insert Flash Text 按鈕 3. 出現如左圖的 Insert Flash Text 對話視窗先在 Font 選擇字型 4. 然後在 Size 欄位輸入文字的大小 5. 接著可在 Color 及 Rollover Color 選取文字的色彩及當滑鼠移上去文字時的色彩 6. 在 Text 輸入文字 7. 在 Link 欄位選取超連結的位置 8. 可以在 Bg Color 選擇文字的背景色 9. 然後在 Save As 位置輸入這個 Flash 文字的名稱與路徑便可 10. 最後按下 OK 按鈕便完成實習題 : 請依下列敘述進行插入各種多媒體元件練習 : 1. 在網頁中加入 Flash 文字, 並且在滑鼠移上去時, 該文字會變色 2. 在網頁中加入 Flash 按鈕, 並使按鈕能連結到網站第 7 頁, 共 15 頁

Layer A. 加入 Layer 1. 按下 Object 面板 Common 類別中的 Draw Layer 按鈕 2. 按下滑鼠的左鍵在網頁內拉曳 Layer 的大小 3. 放開滑鼠,Layer 便會加入到網頁中 B. 在 Layer 中加入內容 1. 將插入點移到 Layer 內, 然後按一下滑鼠的左鍵 2. 加入想要的文字或圖片均可 C. 更改 Layer 的名稱 1.

8 Layer A. 加入 Layer 1. 按下 Object 面板 Common 類別中的 Draw Layer 按鈕 2. 按下滑鼠的左鍵在網頁內拉曳 Layer 的大小 3. 放開滑鼠,Layer 便會加入到網頁中 B. 在 Layer 中加入內容 1. 將插入點移到 Layer 內, 然後按一下滑鼠的左鍵 2. 加入想要的文字或圖片均可 C. 更改 Layer 的名稱 1. 先選取 Layer 2. 按下滑鼠的右鍵, 在快顯功能表下拉選取 Layers 選項 3. 出現如左圖的 Layers 視窗, 在這視窗按下 Layer 名稱兩下, 再輸入新的 Layer 名稱便可 D. Layer 的顯示與隱藏 1. Layer 預設的顯示是隱藏狀態 2. 出現此圖示為顯示狀態 3. 出現此圖示為隱藏狀態 4. 按一下此處可切換顯示隱藏狀態第 8 頁, 共 15 頁

選取 Layer, 將 Layer 拖曳到 Timelines 面板, 淡紫色的 Animation bar 就會出現 4. 請將 Animation bar 移到第一格, 即可從第一格開始播放動畫 5.

9 Timeline A. 用 Layer 及 Timeline 製作動畫 1. 首先將剛才製作的 Layer 移到網頁的右方,Layer 將會在這個位置往左移動 2. 接著, 在 Modify 功能表下拉選取 Timeline, 然後再選取 Add Object to Timeline, 會出現如左圖的 Timeline 視窗 3. 選取 Layer, 將 Layer 拖曳到 Timelines 面板, 淡紫色的 Animation bar 就會出現 4. 請將 Animation bar 移到第一格, 即可從第一格開始播放動畫 5. 放開滑鼠時, 會出現一對話視窗, 告知你即將建立動畫, 按下視窗上的 OK 按鈕,Layer 動畫便會產生 6. 將 Playback head 拉到第 15 格 7. 將 Layer 移到網頁的中央 8. 按住此按鈕不放, Playback head 會往前移動播放動畫, 來預覽動畫的效果第 9 頁, 共 15 頁

首先將動畫最後一格拉曳到第 30 格畫格 3. 然後在 Animation bar 的第 10 格處按一下滑鼠的左鍵 4. 再按一下滑鼠的右鍵來查看快顯功能表 5.

10 9. 勾選 Timeline1 的 Autoplay 選項 10. 會出現如左圖的對話視窗, 按下 OK 按鈕便可 11. 請按下鍵盤上的 F12 按鈕來預覽網頁, 才看得見動畫播放的情形 B. 曲線路徑 1. 要將原本的直線動畫, 改成為曲線路徑移動 2. 首先將動畫最後一格拉曳到第 30 格畫格 3. 然後在 Animation bar 的第 10 格處按一下滑鼠的左鍵 4. 再按一下滑鼠的右鍵來查看快顯功能表 5. 在快顯功能表選取 AddKeyframe 指令 6. 然後拖曳 Layer 到另一處位置 7. 放開滑鼠左鍵, 曲線路徑便會出現 8. 最後, 請按下鍵盤上的 F12 按鈕來預覽網頁, 才看得見動畫播放的情形第 10 頁, 共 15 頁

製作跳頁式連結選單 A. 插入跳頁式選單 (Jump Menu) 1. 首先按下 Objects 面板左上角的黑色倒三角形, 然後點選 Forms 類別, 然後按下 Insert Jump Menu 按鈕 2. 出現如左圖的對話視窗 3. 先在 Text 欄位輸入要出現在選單中的文字項目如輸入幼兒教育學院 4.

11 製作跳頁式連結選單 A. 插入跳頁式選單 (Jump Menu) 1. 首先按下 Objects 面板左上角的黑色倒三角形, 然後點選 Forms 類別, 然後按下 Insert Jump Menu 按鈕 2. 出現如左圖的對話視窗 3. 先在 Text 欄位輸入要出現在選單中的文字項目如輸入幼兒教育學院 4. 然後在 When Selected, Go to URL 欄位指定這個項目的超連結目標 5. 再在 Open URLs In 欄位指定要使連結網頁在哪個 Frame 出現 6. 若要增加第 2 個連結項目, 可以按下按鈕來新增( 按按鈕則可刪除現有的項目 ) 7. 而使用按鈕則可調整各連結項目的上下順序 8. 按下 OK 按鈕, 便成功加入了一個跳頁式選單了第 11 頁, 共 15 頁

請在新增的空白網頁中, 任意拉曳出兩個 Layer, 並在兩個 Layer 中鍵入同樣的文字, 其中一個 Layer 的文字使用藍色, 另外一個用黑色, 然後拖曳兩個 Layer 使他們部分重疊,

12 B. 修改跳頁式選單的內容 1. 在 Windows 功能表下拉選取 Behaviors 指令來開啟 Behaviors 面板 2. 然後點選網頁上的跳頁式選單 3. 按在 Behaviors 面板中的 Jump Menu 兩下, 如左圖 4. 出現如左圖的 Jump Menu 對話視窗, 可按照前面插入跳頁式選單的方法來修改便可實習題 : 1. 請在新增的空白網頁中, 任意拉曳出兩個 Layer, 並在兩個 Layer 中鍵入同樣的文字, 其中一個 Layer 的文字使用藍色, 另外一個用黑色, 然後拖曳兩個 Layer 使他們部分重疊, 以製造出陰影字的效果 2. 請在新增的空白網頁中, 任意拉曳出一個 Layer, 並在其中任意鍵入文字或放入圖片接著利用 Timelines 面板, 用以上的方法, 在第 5 至 25 格間製作該 Layer 移動畫, 並且使網頁一開啟就播放此動畫第 12 頁, 共 15 頁

Frame A. 分割 Frame 1. 首先按下 Objects 面板左上角的黑色倒三角形, 然後點選 Frames 類別, 就會看到 Dreamweaver 所提供的各種分割 Frame 的方式 2. Insert Left Frame: 插入左 Frame 3. Insert Right Frame: 插入右 Frame 4. Insert Top Frame: 插入上 Frame 5.

13 Frame A. 分割 Frame 1. 首先按下 Objects 面板左上角的黑色倒三角形, 然後點選 Frames 類別, 就會看到 Dreamweaver 所提供的各種分割 Frame 的方式 2. Insert Left Frame: 插入左 Frame 3. Insert Right Frame: 插入右 Frame 4. Insert Top Frame: 插入上 Frame 5. Insert Bottom Frame: 插入下 Frame 6. 要移除 Frame, 只要將 Frame 框線拉曳到畫面外即可 B. 加入 Frame 1. 在 Windows 功能表下拉選取 Frames 指令來開啟 Frames 面板, 如左圖 2. 在 Frames 面板中按下目標 Frame 3. 在 Frames 面板的最外框按一下, 即可選定整個 Frameset 4. 在上頁框中按下滑鼠的左鍵, 即可選定上頁框 5. 或在下頁框中按下滑鼠的左鍵, 即可選定下頁框 6. 接下來, 被選定的 Frame 就可以採用以上的方法來進行分割第 13 頁, 共 15 頁

C. 儲存 Frame 1. 在 File 功能表下拉選取 Save All Frames 指令 2. 第一次儲存的是這個 Frame 資料的 Frameset 3.

完成第一次儲存 Frame 的工作後, 以後存檔時, 若要一次將所有 Frame 中的網頁都儲存, 只要直接執行 File 功能表中的 Save All Frames 指令便可 D. Frame 的屬性設定 1.

Frame Name: 每個 Frame 都要命名, 這樣在設定超連結及 Script 等才能指定 Frame 目標 3.

14 C. 儲存 Frame 1. 在 File 功能表下拉選取 Save All Frames 指令 2. 第一次儲存的是這個 Frame 資料的 Frameset 3. 而接下來則是依 Document window 面板所選取的 Frame 網頁, 來一一進行存檔的動作 4. 若網頁有三個 Frame, 則要儲存 4 次檔案 ( 包括儲存 Frameset) 5. 完成第一次儲存 Frame 的工作後, 以後存檔時, 若要一次將所有 Frame 中的網頁都儲存, 只要直接執行 File 功能表中的 Save All Frames 指令便可 D. Frame 的屬性設定 1. 在 Frames 面板上選擇單一的 Frame, 在 Properties 面板便可看到關於這個 Frame 的各項屬性設定 2. Frame Name: 每個 Frame 都要命名, 這樣在設定超連結及 Script 等才能指定 Frame 目標 3. Scroll: 當我們將網頁分割為幾個 Frame 之後, 有時會因 Frame 太小, 無法顯示出該網頁的所有內容, 而必須使用捲動軸來調整瀏覽的範圍 4. Borders & Border Color: 設定該 Frame 是否顯示邊框及其色彩 E. Frame 名稱的功用 1. 在左邊的 Frame 插入一排按鈕 2. 點選其中一個按鈕, 在 Properties 面板的 Link 欄位輸入要連結的網址 3. 在 Target 欄位點選連結網頁要出現在哪一個 Frame 如要在 mainframe 出現, 則在 Target 欄位點選 mainframe 便可第 14 頁, 共 15 頁

15 實習題 : 1. 請依下列敘述進行分割網頁的練習 : i. 建立一個新的空白網頁, 將這個網頁分割成如下圖, 並將三個 Frame 分別命名因 \ 為 up left 及 main; ii. 在名為 up 的 Frame 中設定一個文字連結至 SECE 網頁站 ( ) 而超連結必須開啟在名為 main 的 Frame 中香港教育學院 ( 幼兒教育學院資訊科技培訓工作坊 ) 第 15 頁, 共 15 頁

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2.

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2. 2005-06 p.1 HTML HyperText Mark-up Language 1. HTML Logo, Pascal, C++, Java HTML 2. HTML (tag) 3. HTML 4. HTML 1. HTML 2. 3. FTP HTML HTML html 1. html html html cutehtmleasyhtml 2. wyswyg (What you see