Transcript CH14 資源圖庫與樣板

第十四章 資源、圖庫與樣板「講師介紹」頁面設計
課前指引
檔案面板與資源面板是Dreamweaver的二大管理中心，分別管
理網站檔案與頁面元件等資料，因此其重要性可想而知，現在
就一起來好好研究資源面板中的各項功能。
章節大綱
14-1 使用資源面板
14-2 活用圖庫功能
14-3 使用範本功能
14-4 應用範例-「講師介紹」頁
面設計
備註：可依進度點選小節
14-1 使用資源面板
操作畫面介紹
點取所要使用的資源類型
切換顯示「網站」或是「最愛」
資源內容預覽畫面
資源清單
可用來將資源加入到頁面中
面板工具按鈕
3
在面板中可以管理的資源類型如下：
4
資源的操作管理(1)
使用最愛功能
1.先點取要加入到最愛中的資源項目
2.再點選此圖示，使加入到最愛
5
按下「確定」鈕
點選此項目可切換到「最愛」的畫面
加入到「最愛」中的資源項目
點取此圖示可將資源項目自「最愛」中
移除
6
資源的操作管理(2)
其他編輯功能
1先在資源項目上點取滑鼠右鍵
2.再從功能清單中選擇所要操作的
指令
7
8
14-2 活用圖庫功能
圖庫內容的建立
1.先選取畫面上的
所有文字
2.切換到圖庫項目
<範例檔：14_01.html>
9
2.剛才選取的文字被加入到資
源圖庫中
1.點選此圖示鈕
輸入圖庫名稱
10
放置圖庫內容的檔案
11
使用圖庫內容
1.建立空白新網頁
2.點選要加入到頁
面上的圖庫項目
3.按「插入」鈕
12
加到頁面中的圖庫內容
13
圖庫內容的更新
2.此時會開啟圖庫檔
1.在要修改的圖庫名
稱上連按2下
14
2.執行儲存動作
1.修改圖庫檔案的內容
有加入圖庫項目的頁面，都可
以按下「更新」鈕自動更新
15
如果要取消圖庫項目和目前頁面之間的連
結時，可以使用屬性面板來進行。
1.先點取要取消圖
庫連結的頁面
2.再點取要取消連
結的圖庫項目
3.點選此按鈕
<範例檔：14_02.html>
16
點選此按鈕
取消連結的圖庫內容
，此時就可以自由編
輯了
<範例檔：14_02ok.html>
17
空白圖庫項目
2.再輸入新增圖庫的名稱，
這個檔案就是空白的圖庫檔案，
連按二下就可以開啟編輯
1.先點取新增圖庫的圖示
18
14-3 使用範本功能
範本的概念
1.建立範本檔案
可以先對於所需要的風格效果設計出一個頁面，接著
再將這個頁面另存成範本檔案（副檔名為dwt）。
19
2.套用範本效果
再來將此範本檔中的網頁效果直接套用到其他頁
面上，如此便可快速的建立許多相同風格的網頁
檔案（如圖中的空白頁面1、2）。
20
3.更新範本效果
若遇到需修改頁面風格時又該如何處理？別擔心
，一旦我們將範本檔案中的效果套用到其他頁面
時，Dreamweaver會自動的在範本檔與套用頁面
之間建立一個連結關係，往後只要範本檔案的內
容有因為修改而變動時，Dreamweaver就會藉由
此連結關係，將所有套用範本效果的頁面作更新
（如圖中的空白頁面1、2）。
21
建立範本檔案(1)
執行功能表中的「檔案/
另存成範本」
<範例檔：14_03.html>
22
2.再點取「儲存」鈕
1.輸入要儲存的樣版名稱
按下此鈕
23
點取所要使用的資源類型
24
建立範本檔案(2)
檔案面板
Dreamweaver會自動新增一個名為
「Templates」的資料夾來放置範本
檔案
25
建立範本檔案(3)
資源面板
1.切換到「資源」標籤頁
2.點選「範本」項目
畫面上會出現範本項目
如果沒有看到範本項目時，可
以點取此圖示進行重新整理
26
使用範本功能(1)
套用樣版效果
1.先點取「temp1.html」
新增完成的三個檔案
2.按此鈕將範本檔
套用到頁面上
27
顯示套用的結果
繼續利用相同方
式，將範本套用
到「temp2.html」
及「temp3.html」
二個頁面
28
使用範本功能(2)
建立可編輯區域
1.先回到範本檔案
2.點選「插入面板/版
面/繪製AP Div」圖示
鈕
3.在網頁上拖曳繪製
出一個矩形區域
<範例檔：14_04.dwt>
29
點選AP Div內部
後，執行「插入/
範本物件/可編輯
區域」指令
30
1.輸入可編輯區域的名稱（也可
以預設名稱）
2.按下「確定」鈕
顯示可編輯區域
的名稱，再執行
存檔動作
31
有用到該範本的網頁文件就會
出現在此視窗中，按下「更新
」鈕可以一起更新所有文件
頁面更新後，按此鈕關閉視窗
32
使用範本功能(3)
移除套用到頁面中的範本
執行功能表中的
「修改/範本/從範
本中分離」指令
33
分離之後的頁面就可以自由編輯了
34
使用範本功能(4)
管理範本檔案
連按二下可開啟範本檔案
新增範本檔案
編輯範本檔案
重新整理網站清單
刪除範本檔案
35
如果使用開啟舊檔的方式開啟範本檔案的話
，則需至網站之下的「Templates」資料夾內
才能找到範本檔案。
1.先點取「Templates」資料夾
2.再點選要開啟的範本檔案即
可
3.按此鈕開啟檔案
36
14-4 應用範例-「講師介紹」頁面設計
請開啟「班級網站」中的「講師介紹」頁
面「teacher.html」，這裡我們要設計各
個講師的簡介頁面。
37
設定網頁背景
執行「修改/頁面屬性」，再從設定視窗中選
擇「frame_main_teacher.jpg」來做為背景影
像，同時將重覆效果設定為「no-repeat」。
38
加入頁面內容
利用「Enter」鍵新增數個段落後，在網
頁中加入影像檔「teacher_01.gif」。如
圖示：
39
設計範本檔案
建立新網頁，命名為「
teacher_temp.html」，並
以「teacher_back_01.png
」來做為背景影像
40
1.執行「檔案/另存成範本」
指令，進入此視窗
2.直接按下此鈕儲存範本
按下「是」鈕離開
41
新增可編輯區域
1.點選此按鈕
2.在網頁上拖曳出AP Div區塊
42
1.將滑鼠游標指定
到AP Div區塊中
2.執行「插入/範本
物件/可編輯區域」
指令
43
按下「確定」鈕
建立完成的可編輯區域
44
設計各個講師頁面
1.開啟teacher_01.html
2.在「資源」面板中，點選teacher_temp範本
3.按此鈕使套用到網頁中
45
1.將滑鼠游標移到可編輯區域中
套用範本後的效果
2.點選「表格」圖示鈕
46
1.設定為2列2欄，並設定
屬性如圖
2.按下「確定」鈕
47
原本建立好的表格
2.按下滑鼠右鍵，執行「表格/合併儲存格」指令
1.點選這兩個儲存格
48
合併後的儲存格
1.依序點選儲存格
2.由此指定背景為
白色
49
2.插入圖檔teacher_01.jpg
3.插入圖檔teacher_02.jpg
4.輸入講師的簡介文字
1.點選此按鈕插入圖片
50
其他講師頁面所要加入的圖片則如下表所
示，至於文字內容就請各位自行構思了。
51
建立網頁超連結
1.企業管理講師的頁面連結
1.先點選要製作影像地圖的圖檔
3.在此拖曳出矩形區塊
4.輸入要連結的網頁
teacher_01.thml
5.設定目標為_blank
2.按下此矩形按鈕
52
2.其他連結區域的連結設定
53
依序完成如上三個超連結設定，影像地圖
的設定即可大功告成。
完成影像地圖設定
54
最後，儲存所有網頁檔案並開啟瀏覽器，
預覽前面所設計的網頁效果。
使用瀏覽器預覽的畫面
效果，並按下此按鈕
55
點取「企業管理」
後，就會出現如圖
的視窗畫面
56
如何快速建立具有範本效果的頁面？請執
行功能表中的「檔案/開新檔案」指令，
並進入下圖視窗。
3.再點取範本名稱
2.選擇放置範本的網站
1.點選「來自範本的頁
面」項目
4.按下「建立」鈕
57
新增的網頁檔案會自
動套用範本效果，只
要將其儲存就好了
58
本章結束
Q&A討論時間
59