第十四章 資源、圖庫與樣板-「講師介紹」頁面設計 課前指引 檔案面板與資源面板是Dreamweaver的二大管理中心，分別管理網站檔案與頁面元件等資料，因此其重要性可想而知，現在就一起來好好研究資源面板中的各項功能。

章節大綱 14-1 使用資源面板 14-2 活用圖庫功能 14-3 使用範本功能 14-4 應用範例-「講師介紹」頁 面設計 14-1 使用資源面板 14-2 活用圖庫功能 14-3 使用範本功能 14-4 應用範例-「講師介紹」頁 面設計 備註：可依進度點選小節

14-1 使用資源面板 操作畫面介紹 點取所要使用的資源類型 切換顯示「網站」或是「最愛」 資源內容預覽畫面 資源清單 14-1 使用資源面板 操作畫面介紹 點取所要使用的資源類型 切換顯示「網站」或是「最愛」   資源內容預覽畫面 資源清單 可用來將資源加入到頁面中 面板工具按鈕

在面板中可以管理的資源類型如下：

資源的操作管理(1) 使用最愛功能 1.先點取要加入到最愛中的資源項目   2.再點選此圖示，使加入到最愛

按下「確定」鈕 點選此項目可切換到「最愛」的畫面   加入到「最愛」中的資源項目 點取此圖示可將資源項目自「最愛」中移除

資源的操作管理(2) 其他編輯功能 1先在資源項目上點取滑鼠右鍵   2.再從功能清單中選擇所要操作的指令

14-2 活用圖庫功能 圖庫內容的建立 1.先選取畫面上的所有文字   2.切換到圖庫項目 <範例檔：14_01.html>

2.剛才選取的文字被加入到資源圖庫中   1.點選此圖示鈕 輸入圖庫名稱

放置圖庫內容的檔案

使用圖庫內容 1.建立空白新網頁   2.點選要加入到頁面上的圖庫項目 3.按「插入」鈕

加到頁面中的圖庫內容

圖庫內容的更新 2.此時會開啟圖庫檔   1.在要修改的圖庫名稱上連按2下

2.執行儲存動作   1.修改圖庫檔案的內容 有加入圖庫項目的頁面，都可以按下「更新」鈕自動更新

如果要取消圖庫項目和目前頁面之間的連結時，可以使用屬性面板來進行。 1.先點取要取消圖庫連結的頁面   2.再點取要取消連結的圖庫項目 3.點選此按鈕 <範例檔：14_02.html>

點選此按鈕 取消連結的圖庫內容，此時就可以自由編輯了 <範例檔：14_02ok.html>

空白圖庫項目 2.再輸入新增圖庫的名稱， 這個檔案就是空白的圖庫檔案，連按二下就可以開啟編輯 1.先點取新增圖庫的圖示

14-3 使用範本功能 範本的概念 1.建立範本檔案 可以先對於所需要的風格效果設計出一個頁面，接著再將這個頁面另存成範本檔案（副檔名為dwt）。

2.套用範本效果 再來將此範本檔中的網頁效果直接套用到其他頁面上，如此便可快速的建立許多相同風格的網頁檔案（如圖中的空白頁面1、2）。

3.更新範本效果 若遇到需修改頁面風格時又該如何處理？別擔心，一旦我們將範本檔案中的效果套用到其他頁面時，Dreamweaver會自動的在範本檔與套用頁面之間建立一個連結關係，往後只要範本檔案的內容有因為修改而變動時，Dreamweaver就會藉由此連結關係，將所有套用範本效果的頁面作更新（如圖中的空白頁面1、2）。

建立範本檔案(1) 執行功能表中的「檔案/另存成範本」 <範例檔：14_03.html>

2.再點取「儲存」鈕   1.輸入要儲存的樣版名稱 按下此鈕

點取所要使用的資源類型

建立範本檔案(2) 檔案面板 Dreamweaver會自動新增一個名為「Templates」的資料夾來放置範本檔案

建立範本檔案(3) 資源面板 1.切換到「資源」標籤頁 2.點選「範本」項目 畫面上會出現範本項目   畫面上會出現範本項目 如果沒有看到範本項目時，可以點取此圖示進行重新整理

使用範本功能(1) 套用樣版效果 1.先點取「temp1.html」 新增完成的三個檔案   2.按此鈕將範本檔套用到頁面上

顯示套用的結果 繼續利用相同方式，將範本套用到「temp2.html」及「temp3.html」二個頁面

使用範本功能(2) 建立可編輯區域 1.先回到範本檔案 2.點選「插入面板/版面/繪製AP Div」圖示鈕   2.點選「插入面板/版面/繪製AP Div」圖示鈕 3.在網頁上拖曳繪製出一個矩形區域 <範例檔：14_04.dwt>

點選AP Div內部後，執行「插入/範本物件/可編輯區域」指令

1.輸入可編輯區域的名稱（也可以預設名稱） 2.按下「確定」鈕 顯示可編輯區域的名稱，再執行存檔動作

有用到該範本的網頁文件就會出現在此視窗中，按下「更新」鈕可以一起更新所有文件 頁面更新後，按此鈕關閉視窗

使用範本功能(3) 移除套用到頁面中的範本 執行功能表中的「修改/範本/從範本中分離」指令

分離之後的頁面就可以自由編輯了

使用範本功能(4) 管理範本檔案 連按二下可開啟範本檔案   新增範本檔案 編輯範本檔案 重新整理網站清單 刪除範本檔案

如果使用開啟舊檔的方式開啟範本檔案的話，則需至網站之下的「Templates」資料夾內才能找到範本檔案。   2.再點選要開啟的範本檔案即可 3.按此鈕開啟檔案

14-4 應用範例-「講師介紹」頁面設計 請開啟「班級網站」中的「講師介紹」頁面「teacher.html」，這裡我們要設計各個講師的簡介頁面。

設定網頁背景 執行「修改/頁面屬性」，再從設定視窗中選擇「frame_main_teacher.jpg」來做為背景影像，同時將重覆效果設定為「no-repeat」。

加入頁面內容 利用「Enter」鍵新增數個段落後，在網頁中加入影像檔「teacher_01.gif」。如圖示：

設計範本檔案 建立新網頁，命名為「teacher_temp.html」，並以「teacher_back_01.png」來做為背景影像

1.執行「檔案/另存成範本」指令，進入此視窗   2.直接按下此鈕儲存範本 按下「是」鈕離開

新增可編輯區域 1.點選此按鈕 2.在網頁上拖曳出AP Div區塊

1.將滑鼠游標指定到AP Div區塊中   2.執行「插入/範本物件/可編輯區域」指令

按下「確定」鈕 建立完成的可編輯區域

設計各個講師頁面 1.開啟teacher_01.html 2.在「資源」面板中，點選teacher_temp範本 3.按此鈕使套用到網頁中

1.將滑鼠游標移到可編輯區域中 2.點選「表格」圖示鈕 套用範本後的效果

1.設定為2列2欄，並設定屬性如圖   2.按下「確定」鈕

原本建立好的表格 2.按下滑鼠右鍵，執行「表格/合併儲存格」指令 1.點選這兩個儲存格

合併後的儲存格   1.依序點選儲存格 2.由此指定背景為白色

2.插入圖檔teacher_01.jpg 3.插入圖檔teacher_02.jpg 4.輸入講師的簡介文字 1.點選此按鈕插入圖片

其他講師頁面所要加入的圖片則如下表所示，至於文字內容就請各位自行構思了。

建立網頁超連結 1.企業管理講師的頁面連結 1.先點選要製作影像地圖的圖檔 3.在此拖曳出矩形區塊   3.在此拖曳出矩形區塊 4.輸入要連結的網頁teacher_01.thml 5.設定目標為_blank 2.按下此矩形按鈕

2.其他連結區域的連結設定

依序完成如上三個超連結設定，影像地圖的設定即可大功告成。 完成影像地圖設定

最後，儲存所有網頁檔案並開啟瀏覽器，預覽前面所設計的網頁效果。 使用瀏覽器預覽的畫面效果，並按下此按鈕

點取「企業管理」後，就會出現如圖的視窗畫面

如何快速建立具有範本效果的頁面？請執行功能表中的「檔案/開新檔案」指令，並進入下圖視窗。 3.再點取範本名稱   2.選擇放置範本的網站 1.點選「來自範本的頁面」項目 4.按下「建立」鈕

新增的網頁檔案會自動套用範本效果，只要將其儲存就好了

本章結束 Q&A討論時間