在「資源」面板中選取資源。
上次更新時間
2021年4月29日
- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
使用 Dreamweaver 中的「資源」面板來管理目前網站中的資源。
您可以使用 Adobe Dreamweaver 來記錄和預覽您網站中所儲存的「資源」，例如影像、影片、顏色、Script 及連結。另外，也可以直接拖曳資源，將它插入目前文件的頁面中。
您可以從各種不同來源取得資源。例如，可以在應用程式 (例如 Adobe Photoshop 或 Adobe Animate CC) 中建立資源、從同事那裡接收資源，或從美工圖案光碟或圖形網站複製資源。
Dreamweaver 還可以讓您存取兩種特殊的資源類型：圖庫和範本。這兩項都是連結的資源：當您編輯圖庫項目或範本時，Dreamweaver 便會更新使用這些資源的所有文件。圖庫項目通常表示小型的設計資源，例如網站標誌或版權。若要控制大型的設計區域，請使用範本。
使用「資源」面板 (「視窗 > 資源」) 可管理目前網站中的資源。「資源」面板中會顯示與「文件」視窗內作用中文件相關的網站資源。
註解：
您必須先定義本機網站，然後才可以在「資源」面板中檢視資源。
「資源」面板提供不同的方式來檢視資源：
網站清單
顯示您網站中的所有資源，包括網站中任何文件所使用的顏色和 URL。
最愛清單
僅顯示您明確選擇的資源。
若要在這兩種檢視之間切換，請選取檢視區域上方的「網站」或「最愛」選項按鈕 (「範本」和「圖庫」類別無法使用這兩種檢視)。
註解：
大部份的「資源」面板作業在這兩種清單中的運作都是相同的。但是，有少數幾項工作只能在「最愛」清單中執行。
這兩種清單中的資源，屬於下列其中一個類別：
影像
GIF、JPEG 或 PNG 格式的影像檔。
顏色
在文件和樣式表中使用的顏色，包括文字、背景和連結的顏色。
URL
目前網站文件中的外部連結，包括 FTP、gopher、HTTP、HTTPS、JavaScript、電子郵件 (mailto) 和本機檔案 (file://) 連結。
媒體
媒體檔案，例如 Adobe Flash (僅限 SWF) 檔案、Adobe Shockwave 檔案、QuickTime 或 MPEG 檔案。
Script
JavaScript 或 VBScript 檔。HTML 檔案中的 Script (而非單獨的 JavaScript 或 VBScript 檔案) 並不會顯示在「資源」面板中。這個類別僅供「程式碼檢視」與「設計檢視」使用。
範本
用於多個頁面的主要頁面版面。修改範本會自動修改附加至該範本的所有頁面。這個類別僅供「程式碼檢視」與「設計檢視」使用。
圖庫項目
用於多個頁面的設計元素；當您修改圖庫項目時，含有該項目的所有頁面都會更新。這個類別僅供「程式碼檢視」與「設計檢視」使用。
註解：
若要顯示在「資源」面板中，檔案必須屬於下列其中一個類別。其他某些檔案類型有時也稱為資源，但是不會顯示在面板中。
依據預設，類別中的資源會按照名稱的字母順序列出，但是您可以按照類型和其他幾種準則來進行排序。您也可以預覽資源，並調整欄和預覽區域的大小。
「類型」欄中的 Creative Cloud 圖示可指示對應的資源是從 Creative Cloud Libraries 中匯入的。您可以按兩下 Creative Cloud 圖示來重新取樣對應的資源。如需有關重複使用 CC Libraries 資源的詳細資訊，請參閱「Dreamweaver 中的 Creative Cloud Libraries」。
檢視預覽區域中的資源
顯示類別中的資源
-
按一下「資源」面板左側的類別圖示。
排序資源
-
按一下欄標題。
例如，若要依類型排序影像清單 (讓所有 GIF 影像排在一起、所有 JPEG 影像排在一起，依此類推)，請按一下「類型」欄標題。
調整欄的大小
-
拖曳兩個欄標題的分隔線。
調整預覽區域的大小
-
請將分隔列 (在預覽區域與資源清單之間) 向上或向下拖曳。
重新整理資源面板
由於 Dreamweaver 必須先讀取網站快取，因此建立網站清單時可能需要幾秒鐘。
有些變更不會立即顯示在「資源」面板中。例如，在網站中新增或移除資源時，這些變更要等到您按一下「重新整理網站清單」按鈕，重新整理「網站」清單後，才會顯示在「資源」面板中。如果在 Dreamweaver 之外新增或移除資源 (例如，使用 Windows 檔案總管或 Finder)，則必須重建網站快取才能更新「資源」面板。
當您移除網站中特定顏色或 URL 的唯一實體時，或是所儲存的新檔案含有網站中尚未使用的顏色或 URL 時，這些變更都要等到重新整理「網站」清單後，才會顯示在「資源」面板中。
- 若要手動重新整理「網站」清單，請按一下「重新整理網站清單」按鈕
。Dreamweaver 會視需要建立或更新網站快取。 - 若要重新整理「網站」清單並手動重建網站快取，請在「資源」清單中按一下右鍵 (Windows) 或 Command + 按一下 (Macintosh)，然後選取「重新整理網站清單」。
在文件中新增資源
您可以將資源拖曳到「文件」視窗的「即時檢視」、「程式碼檢視」和「設計檢視」，或是使用面板的「插入」按鈕，將大部分的資源插入文件中。您可以從清單檢視與「資源」面板的預覽窗格拖曳資源。
注意：從預覽窗格拖曳只在 Mac 上支援。
您可以在設計或即時檢視中插入顏色和 URL。您可以在設計檢視中，將顏色和 URL 套用到所選取的元素。
-
在文件中，將插入點置於您想要資源出現的地方。
-
在「資源」面板中，從左側的資源類別按鈕中進行選取。註解：
請選取「範本」以外的任何類別。範本會套用到整份文件，而不能插入至文件中。
-
選取面板頂部的「網站」或「最愛」，然後再選取資源。
圖庫項目沒有「網站」或「最愛」清單；請在插入圖庫項目時略過這個步驟。
-
請執行下列其中一項作業：
將資源從面板拖曳到文件。您可以從清單檢視與預覽窗格拖曳。
注意：您不能在 Windows 上從預覽窗格拖曳資源。
您可以將 Script 拖曳到「文件」視窗的檔頭內容區域；如果沒有顯示這個區域，請選取「檢視 > 檔頭內容」。
選取面板中的資源，並按一下「插入」。
如果插入的資源為顏色，將會套用到插入點之後出現的文字。
使用資源面板將顏色套用到文字
「資源」面板會顯示您已套用到各種元素 (例如文字、表格邊框、背景等) 的顏色。
-
在設計檢視中，執行以下步驟：
-
選取文件中的文字。
-
在「資源」面板中，選取「顏色」類別。
-
選取所需的顏色，然後按一下「套用」。
-
-
在即時檢視中，執行以下步驟：
-
在「資源」面板中，選取「顏色」類別。
-
請執行下列其中一項作業：
- 以滑鼠右鍵按一下「資源」面板中的顏色，然後按一下「複製顏色值」。顏色值會複製到您的剪貼簿。現在您可以在 CSS 設計工具中貼上顏色值 (Ctrl+v、Cmd+v)。
- 從預覽拖曳顏色，並將滑鼠停留在即時檢視中元素的上方。放下顏色時會出現「新增 CSS 規則」對話方塊，然後按一下「確定」時，顏色會套用到所選取的元素。
- 在「資源」面板中按一下「套用」。「新增 CSS 規則」對話方塊隨即顯示，當您按一下「確定」時，顏色會套用到所選取的元素。
-
將 URL 指定給影像或文字
-
在設計檢視中，執行以下步驟：
-
選取文字或影像。
-
在「資源」面板中，視儲存 URL 的位置而定，選取「網站」或「最愛」檢視中的 URL 類別。
註解：根據預設，網站檔案的 URL 會儲存在「網站」檢視中。「最愛」檢視會保留您自己加入的 URL。
-
選取 URL。
-
請執行下列其中一項作業：
將 URL 從面板拖曳到「設計」檢視中的選取範圍。
選取 URL，然後按一下「插入」。
-
-
在即時檢視中，執行以下步驟：
-
在「資源」面板中，視儲存 URL 的位置而定，選取「網站」或「最愛」檢視中的 URL 類別。
-
請執行下列其中一項作業：
- 從預覽或清單檢視拖曳該 URL。將滑鼠停留在即時檢視中元素的上方。放下 URL 時，<a> 會圍繞即時檢視中反白標示的元素。
- 按一下「即時檢視」中的必要元素。選擇「資源」面板中的 URL，然後按一下「套用」。所選取的元素由 <a> 標籤圍繞。
-
選取和編輯資源
「資源」面板可以讓您一次選取多個資源， 也提供了一種開始編輯資源的快速方法。
選取多個資源
-
在「資源」面板中，選取資源。
-
以下列其中一種方式選取其他資源：
Shift + 按一下以選取一連串連續的資源。
Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh)，可將個別的資源加入選取範圍 (即使是與目前選取範圍不相鄰的資源亦可)。Control + 按一下或 Command + 按一下已選取的資源，便可取消選取。
編輯資源
在編輯「資源」面板中的資源時，其行為可能會因資源的類型而有不同。對於某些資源 (例如影像) 而言，您會使用外部編輯器；如果您已為該資源類型定義編輯器，該編輯器便會自動開啟。您只能在「最愛」清單中編輯顏色和 URL。編輯範本和圖庫項目時，您會在 Dreamweaver 中進行變更。
-
在「資源」面板中，請執行下列其中一項作業：
在這個資源按兩下。
選取資源，然後按一下「編輯」按鈕。
註解：如果必須在外部編輯器中編輯資源，但編輯器不會自動開啟時，請選取「編輯 ＞ 偏好設定」(Windows) 或「Dreamweaver ＞ 偏好設定」(Macintosh)，再選取「檔案型態/編輯器」類別，然後確定您已為該資源類型定義外部編輯器。
-
進行所要的變更。
-
完成上述步驟之後，請執行下列任一項作業：
如果資源是檔案架構的資源 (顏色或 URL 以外的任何項目)，請加以儲存 (透過所使用的編輯器)，然後將它關閉。
如果資源是 URL，請按一下「編輯 URL」對話方塊中的「確定」。
註解：如果資源是顏色，在您挑選顏色後，顏色挑選器就會自動關閉。若要關閉顏色挑選器而不挑選顏色，請按 Esc 鍵。
將資源重複使用於另一個網站
「資源」面板會顯示目前網站的所有資源 (可辨認的類型)。若要將目前網站的資源用於另一個網站，您必須將其複製到這個網站。您可以複製個別資源、一組個別資源，或一次複製整個「最愛」資料夾。
與遠端網站互傳資源之前，您可能必須先從「檔案」面板找出對應於「資源」面板中資源的檔案。
註解：
「檔案」面板顯示的網站，可能會與「資源」面板所顯示的不同， 這是因為「資源」面板是與作用中文件相關聯。
找出檔案面板中的資源檔案
-
在「資源」面板中，選取您要尋找的資源類別。
-
在「資源」面板中，以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 資源的名稱或圖示，再從快速選單中選取「指出在網站中位置」。註解：
「指出在網站中位置」無法用於尋找顏色和 URL，因為它們並不與網站中的檔案相對應。
然後便會開啟「檔案」面板，並選取了這個資源檔案。請注意，「指出在網站中位置」命令會尋找與資源本身對應的檔案，而非尋找使用此資源的檔案。
將資源面板中的資源複製到另一個網站
-
在「資源」面板中，選取您要複製的資源類別。
-
以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh)「網站」清單或「最愛」清單中的一或多個資源，再選取「複製到網站」，然後從列出您所定義之全部網站的子選單中，選取目標網站名稱。註解：
在「最愛」清單中，可以複製「最愛」資料夾以及個別資源
這些資源會複製到目標網站中的對應位置。Dreamweaver 會視需要在目標網站的階層中建立新資料夾。這些資源也會加入目標網站的「最愛」清單中。
註解：如果您所複製的資源為顏色或 URL，則只會顯示在目標網站的「最愛」清單中。因為顏色和 URL 並沒有對應的檔案，所以沒有檔案可以複製到另一個網站中。
