香港教育學院 幼兒教育學院 SECE 資訊科技培訓工作坊 Macromedia Dreamweaver 4 入門篇工作坊 (7) 第 1 頁, 共 19 頁
目錄 香港教育學院 ( 幼兒教育學院 資訊科技培訓工作坊 (2002-2003) 香港教育學院 - 幼兒教育學院 : 資訊科技培訓工作坊 (2002-2003) 1 目錄 2 第一部分 Dreamweaver 術語 3 第二部分 Dreamweaver 4 介紹 4 1. Dreamweaver 4 工作環境介紹 4 A. 開啟 Dreamweaver 4 4 2. 新增網站 4 A. 新增網站 4 B. 建立網站的架構 5 3. 設計網頁內容 7 A. 頁面屬性的設定 7 B. 加入文字及改變文字的大小 9 C. 讓文字加粗及變成斜體 9 D. 使網頁的文字對齊居中 9 E. 改變文字的字型及顏色 10 F. 改變文字排列方式 12 G. 加入圖片 12 H. 改變圖片的大小 13 I. 改變文字與圖片之間的排列關係 13 4. 超連結 14 A. 連結其他網站 14 B. 連結自己的網頁 14 5. 表格的製作 16 A. 表格的製作 16 B. 編輯表格 16 C. 合併表格中的儲存格 16 D. 插入整列儲存格 17 E. 改變表格的外框寬度 18 F. 表格的背景加入顏色 18 G. 改變表格框架的顏色 18 H. 在表格中加入背景圖 19 第 2 頁, 共 19 頁
Dreamweaver 術語 香港教育學院 ( 幼兒教育學院 資訊科技培訓工作坊 (2002-2003) 首頁 (Home Page/Index Page) 所謂首頁, 是指由網址進入時第一個看到的畫面便是首頁 在首頁上通常都會將所有資訊清楚的放在這個頁面上, 目的就是為了使瀏覽者在使用這個網頁時能快速地連結到需要的資料 檔案傳輸協定 (FTP) FTP 是 File Transfer Protocol 檔案傳輸協定的縮寫, 是 Internet 上的一個重要運用工具 利用 FTP 專用程式軟體, 在收送兩端電腦建立好連線後, 會將程式檔案自動切分成一小塊一小塊, 透過檔案傳輸協定在 Internet 上傳送, 然後由接收端再將檔案重新組合起來, 以達成檔案傳遞的目的 圖層 (Layer) 你可以把它想像成 Word 文書編輯器裡的圖形框或是插入的圖形檔案, 在圖層當中我們可以加入文字或是圖片等等, 同時各個圖程是可以互相重疊的, 每一個圖層就是一個獨立的區塊, 學理一點來說, 圖層就是三度空間的物體, 也就是說, 在一般的網頁編輯中只有 X 與 Y 軸的平面, 但是當我們使用圖層之後, 網頁將不只是 XY 的平面而變成了具有 XYZ 三軸向的立體空間 時間軸 (TimeLine) 是一個類似計時器的物件, 類似 Visual Basic 或是其他程式撰寫工具裡的 Timer 元件, 它是用來觸發程式運作的關鍵元件, 例如 : 網站中的廣告圖片輪播看板, 就是在網頁中固定的位置上每隔一段時間就輪流撥放不同的廣告圖片 對齊 (Align) 圖形與文本的相互對齊方式, 其後的下拉選框有十個選項 :Baseline 和 Bottom 是圖形底部和文本的底行對齊 Absolute Bottom 是圖形底部和文本的最底線完全對齊 Top 是圖形頂部和文本的頂線完全對齊 Text Top 是圖形頂部和文本頂線對齊 Middle 是圖形中央和文本底線對齊 Absolute Middle 是圖形中央和文本的正中間對齊 Left 是圖形在左, 文本在右 ;Right 則反之 第 3 頁, 共 19 頁
Dreamweaver4 工作環境介 紹 A. 開啟 Dreamweaver 4 1. 從 開始 點選 程式集 再點選 Macromedia Drearmweaver 4 最後選取 Drearmweaver 4 來啟動程式 2. 而最常用的版面是 Objects 及 Properties 因編輯的地方有限, 所以可以把其他不常用的面版關閉 新增網站 A. 新增網站 1. 設計網站前, 首先要設定網站名稱和本地根資料夾 所謂本地根資料夾就把你目前要做的網站, 先將它製作在你電腦上 : 通常我們在電腦的硬碟上, 新增一個資料夾, 然後將網站的設計的圖形 聲音 影片 文字及網頁, 全部放在這個資料夾內 所以 Drearmweaver 要先知道這個資料夾的位置, 管理本地根資料夾 2. 由 Site 功能表下拉選取 New site 指令, 會出現如左圖的設定畫面, 在設定畫面中的網站名稱 (Site Name), 鍵入 電腦認知 3. 在 Local Root Folder 欄位後, 點 一下黃色資料夾圖示, 設定在本 機放置網站的資料夾 第 4 頁, 共 19 頁
4. 出現如左圖的 Choose Local Folder 對話視窗, 選擇磁碟機 C: 內的 WebSite 資料夾 如在磁碟機中沒有此資料夾, 請按一下 建立新資料夾 並將其命名為 WebSite, 完成後按 Open 再按 Select 5. 完成之後, 回到 Site Definition 對話視窗, 只需設定這兩個欄位便可 再按下 0K 按鈕 6. 出現如左圖的視窗,Dreamweaver 會詢問你是否建立網站系統資料, 按一下 0K 按鈕離開便可 Index.htm Content_main.ht m B. 建立網站的架構 1. 設計網站的架構 ( 本網站的架構如左圖 ) 2. 設計網站的架構後, 便在 Dreamweaver 中的 Site 視窗建立網頁檔案及資料夾 Content.htm Link.htm Mail.htm Detail.htm 第 5 頁, 共 19 頁
3. 要新增網頁, 首先要選取 Site 視窗中的 C:/WebSite 的資料夾, 按滑鼠的右鍵一下, 在出現的快顯功能表上選擇 New File 指令 4. 完成之後,, 會看見如左圖的新網頁, 通常預設值是 untitled.htm, 現在可以修改檔案的名稱 5. 要新增資料夾, 與新增網頁大致相同, 選取 C:/WebSite 的資料夾後, 按滑鼠的右鍵一下, 在出現的快顯功能表上選擇 New Folder 指令 6. 完成後, 會看見如左圖的新資料夾, 直接修改資料夾的名稱便可 7. 如是者請建立 content.htm, link.htm content_main.htm detail.htm mail.htm 網頁及 image 資料夾 8. 完成後, 網站的所有檔案及資料夾都清楚顯示出來 9. 現在把 index.htm 設定為首頁 首先選擇 index.htm, 然後按滑鼠右鍵一下, 在出現的快顯功能表中選擇 Set as Home Page 指令便可 第 6 頁, 共 19 頁
設計網頁內容 A. 頁面屬性的設定 1. 首先一個網頁的開始, 必須先設定網頁屬性, 這些屬性包括網頁的標題 網頁的底色 網頁超連結的狀態及網頁邊框的空間等等 2. 在 Site 視窗中的本地根資料夾內, 點選 content.htm, 然後按兩下滑鼠的左鍵來設計網頁內容 如左圖 3. 進入 content.htm 網頁 4. 在 Modify 功能表下拉選取 Page Properties 來進入頁面屬性的設定 5. 出現如左圖的 Page Properties 對話視窗, 在這裡便可以開始設定頁面屬性 6. 在 Title 欄位內輸入網頁的標題, 鍵入 課文 7. 現在為網頁加入背景圖片, 在 Background Image 欄位後面, 點一下 Browse 按鈕 開啟 Select Image source 對話視窗 在 Resource 的資料夾中, 找尋 background.gif 第 7 頁, 共 19 頁
8. 按下 Select 後, 便會出現如左圖的對話視窗, 在此選擇 是 (Y) 來把圖片檔案複製到網站的根目錄 9. 把檔案存到 image 的資料夾中 注意: 請把所有的圖檔儲存於 image 的資料夾內 10. 按 確定 後, 返回頁面內容屬性設定, 然後再按 0K 按鈕離開 11. 在頁面屬性設定中, 除了可設定網頁的標題及網頁的底色外, 還可以設定文字的色彩及網頁超連結的不同狀態的色彩 如左圖 第 8 頁, 共 19 頁
B. 加入文字及改變文字的大小 1. 在 Site 視窗中的本地根資料夾內, 用滑鼠的左鍵按 content.htm 兩次來開啟網頁 2. 現在從 開始 程式集 附屬應用程式 記事本 啟動記事本並開啟文字檔 content.txt 開啟文字檔案後, 把文章複製至網頁中 3. 在 編輯 功能表下拉選取 選擇全部 指令來選取所有文字 再由 編輯 功能表下拉選取 複製 把文字複製 4. 返回 Dremweaver 4 的編輯畫面, 然後在 Edit 功能表下拉選擇 Paste 指令來把文字貼在網頁上 5. 要改變文字的大小, 首先選取文字 電腦硬件 Hardware 6. 在 Properties 面板上的 Size 欄位下拉選擇文字的大小便可 如左圖點取 7 C. 讓文字加粗及變成斜體 1. 要讓文字加粗及變成斜體, 首先選取文字 電腦硬件 Hardware 2. 然後按下 Properties 面板右上方的加粗 Bold 按鈕 3. 同樣, 要讓文字變成斜體, 只要在 Properties 面板右上方的斜體 Italic 按鈕按一下便可 D. 使網頁的文字對齊居中 1. 要使網頁的文字對齊居中, 首先選取文字 電腦硬件 Hardware 2. 然後按下 Properties 面板上的居中 按鈕便可 3. 除了以上的 居中 效果外, 還有 靠右 及 靠左 效果 第 9 頁, 共 19 頁
E. 改變文字的字型及顏色 1. 現在要將 電腦硬件 Hardware 的字型改變為標楷體, 首先選取文字 電腦硬件 Hardware, 然後按下 Properties 面板上的 Default Font 下拉選單選選擇字型: 標楷體便可 如左圖 2. 要改變文字的顏色, 先要選取文字 電腦硬件 Hardware, 然後按下 Properties 面板上的 按鈕, 會出現如左圖的視窗, 點選藍色, 再按 確定 按鈕便可 3. 在設定字型時, 字體清單中可能會找不到任何中文字體, 所以必須設定編輯字體清單 4. 要編輯字體清單, 首先按下 字體 清單, 然後選取 Edit Font List 如左圖 第 10 頁, 共 19 頁
5. 出現如左圖的 Edit Font List 對話視窗 6. 在 Available Fonts 欄位內選擇要使用的字體 7. 按一下向左 << 的按鈕, 這樣便可建立一個字體 8. 最後按下 0K 按鈕便完成 實習題 : A. 在 content.htm 中, 把網頁中 輸入設備 Input devices 及 輸出設備 Output devices, 這些文字作下列的修改 : i. 字型 : 標楷體 ii. 大小 :4 iii. 樣式 : 粗體 iv. 對齊位置 : 居中 B. 試編輯新網 content_main.htm i. 內容文字檔 :content_main.txt ii. Page Properties: Title: 目錄 Background Image:bgcc.jpg 把 輸入設備 及 輸出設備 等文字的大小設定為 -1 第 11 頁, 共 19 頁
F. 改變文字排列方式 1. 請先在 Site 視窗中, 用滑鼠的左鍵按兩下 content_main.htm 來開啟網頁 2. 選取文字 輸入設備 及 輸出設備 3. 按下 Properties 面版上的 Unordered List 按鈕 4. 完成後便會看到如左圖的畫面 G. 加入圖片 1. 請先在 Site 視窗中, 用滑鼠的左鍵按兩下 detail.htm 來開啟網頁 2. 把游標移到文字 鍵盤 keyboard 的開端 3. 在 Object 的版面按下 Insert Image 按鈕 4. 出現如左圖的 Select Image Source 視窗 5. 在 resources 的資料夾中, 選擇 keyboard.jpg 後, 按 Select 鍵 6. 按下 Select 鍵後, 便會出現如左圖的對話視窗,在此選擇 是 (Y) 按鈕來把圖片檔索複製至網站的根目錄 7. 請把檔案存至 image 的資料夾中 第 12 頁, 共 19 頁
H. 改變圖片的大小 1. 點選圖片 keyboard.jpg, 可以在圖片的右邊 下面及右下角看見黑色控制點, 如左圖 2. 將滑鼠的控制點作拖曳便可改變圖片的大小 I. 改變文字與圖片之間的排列關係 1. 點選圖片 keyboard.jpg 2. 在 Properties 面版中的 Align 欄位下拉選取 Absolute Middle 如左圖 3. 文字與圖片便會横向的居中排列 實習題 : 試編輯新網頁 link.htm 1. 文字檔案來源 :link.txt 2. Page Properties: i. Title: 相關網頁 ii. Background Image:background.gif 3. 插入 link.gif 圖片作標題, 位置居中 4. 插入 col_logo.gif 圖片, 並將其縮小 5. 插入 banner.jpg 圖片, 並將其縮小 第 13 頁, 共 19 頁
超連結 A. 連結其他網站 1. 在 Site 視窗中, 用滑鼠的左鍵按兩下 link.htm 來開啟網頁 2. 選取網頁中的 http://www.ied.edu.hk 3. 在 Properties 面版上的 link 的欄位上輸入網址 http://www.ied.edu.hk 4. 在 Properties 面版上的 Target 下拉式選單選取 _blank 如左圖 5. 可按鍵盤上的 F12 按鈕來測試超連結 6. _blank: 開啟另一個新視窗顯示超連結網頁, 仍然保留原有的視窗 7. _self: 在按鈕所在的框裡開啟超連結網頁, 取代原有頁框的內容 B. 連結自己的網頁 1. 開啟 detail.htm 2. 在 Object 面版的右上角按按鈕, 然後將 Common 切換為 Invisibles 如左圖 第 14 頁, 共 19 頁
3. 把游標移到文字 輸入設備 Input device 的末端 4. 在 Object 面版上按下 Insert Named Anchor 按鈕 5. 出現如左圖的 Insert Named Anchor 對話視窗, 輸入 input, 然後按 OK 按鈕 6. 文字 輸入設備 Input device 的末端, 便會多了一個如左圖的 錨 點 如左圖 7. 完成後, 儲存並關閉此頁 8. 開啟 content.htm 來建立連結 9. 選取文字 輸入設備 Input device, 然後在 Properties 面版中 Link 欄位後的 按鈕來設定連結 如左圖 10. 出現如左圖的 Select file 視窗, 點選 detail.htm, 然後在 URL 裡的所有文字之後加上 #input 11. 再按下 Select 按鈕便可 第 15 頁, 共 19 頁
表格的製作 A. 表格的製作 1. 在 Site 視窗中, 用滑鼠的左鍵按兩下 link.htm 來開啟網頁 2. 按滑鼠的游標移到網頁 link.htm 的下方的空位, 然後在 Object 的 面版按下 Insert Table 按鈕 3. 會出現如左圖的 Insert Table 對話視窗, 現插入一個 2 個欄位及 3 個列數的表格 4. 完成後按下 OK 按鈕便可 B. 編輯表格 12. 要使表格在網頁的中央, 先要點表格 13. 然後在 Properties 面版中的 Align 欄位下拉選取 Center 指令便可 如左圖 14. 網頁中的格表格便已居中 C. 合併表格中的儲存格 1. 使用滑鼠壓住左上角第一個儲存格上, 然後拖曳到第二個儲存格, 這樣便可以框選需要合併的儲存格 2. 在 Properties 面版中按下 Merges select cells using spans 按鈕, 如 左圖 3. 便可在網頁中看到兩個儲存格被合併為一個儲存格 第 16 頁, 共 19 頁
D. 插入整列儲存格 1. 在要插入整列儲存格的儲存格上, 按下滑鼠的右鍵, 在快顯功能表點 Table 然後再選取 Insert Rows or Columns 指令 2. 會出現如左圖的 Insert Rows or Columns 對話視窗 實習題 : 利用以上的方法, 把網頁 link.htm 製作成以下的畫面 3. 在 Insert 欄位內, 點選 Row, 表示要插入整列儲存格 4. 在 Number of Rows 輸入要插入列的數量 ( 輸入 :1) 5. 在 Where 欄位內, 點選 Below the selection, 表示要插入在現在選取的儲存格之下方 6. 完成以上的步驟後, 按 0K 按鈕離開便可以看見新加入的整列儲存格 第 17 頁, 共 19 頁
E. 改變表格的外框寬度 1. 先點選表格 2. 然後在 Properties 面版上的 Border 欄位內輸入表格外框寬度, 輸入 10 3. 可以看見如左圖般, 表格的外框加粗了 F. 表格的背景加入顏色 1. 先點選表格 2. 然後在 Properties 面版上點選 Bg Color 背景顏色的下拉選單, 再點 選 白色 如左圖 3. 可以看見表格的背景加入了白色 G. 改變表格框架的顏色 1. 先點選表格 2. 然後在 Properties 面版上點選 Brdr Color 外框顏色下拉選單, 再點選 藍色 如左圖 3. 可以看見表格的外框變成藍色 第 18 頁, 共 19 頁
H. 在表格中加入背景圖 1. 先點選表格 2. 然後在 Properties 面版上點選 Bg Image 背景圖片欄位後面的黃色檔 案圖示 3. 開啟如左圖的 Select Image Source 對話視窗 4. 在 resource 資料夾中, 點選 background2.gif 5. 按下 Select 按鈕, 會出現如左圖的對話視窗, 按下 是 (Y) 按鈕圖片檔案複製到網站的根目錄 6. 把檔案存到 image 資料夾中 7. 這樣便完成在表格中加入背景圖片 實習題 : 試製作一個介紹自己的個人網頁, 並必須符合下列條件 : 1. 網頁的頁數為三頁或以上 2. 網頁的 Title 必須是 我的第一個個人網頁 3. 其中一頁是主頁, 能用超連結連結到其他的網頁 4. 其中一頁是介紹自己, 要有色彩的文字 圖片等 5. 其中一頁是推介一些你常到的網站, 必須要使用表格及使用超連結 第 19 頁, 共 19 頁