第十四章 資源、圖庫與樣板-「講師介紹」頁面設計

Presentation on theme: "第十四章 資源、圖庫與樣板-「講師介紹」頁面設計"— Presentation transcript:

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

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

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

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

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

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

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

8

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

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

11 放置圖庫內容的檔案

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

13 加到頁面中的圖庫內容

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

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

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

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

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

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

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

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

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

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

24 點取所要使用的資源類型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

59 本章結束 Q&A討論時間