使用 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」。

檢視預覽區域中的資源

  1. 在「資源」面板中選取資源。

顯示類別中的資源

  1. 按一下「資源」面板左側的類別圖示。

排序資源

  1. 按一下欄標題。

    例如,若要依類型排序影像清單 (讓所有 GIF 影像排在一起、所有 JPEG 影像排在一起,依此類推),請按一下「類型」欄標題。

調整欄的大小

  1. 拖曳兩個欄標題的分隔線。

調整預覽區域的大小

  1. 請將分隔列 (在預覽區域與資源清單之間) 向上或向下拖曳。

重新整理資源面板

由於 Dreamweaver 必須先讀取網站快取,因此建立網站清單時可能需要幾秒鐘。

有些變更不會立即顯示在「資源」面板中。例如,在網站中新增或移除資源時,這些變更要等到您按一下「重新整理網站清單」按鈕,重新整理「網站」清單後,才會顯示在「資源」面板中。如果在 Dreamweaver 之外新增或移除資源 (例如,使用 Windows 檔案總管或 Finder),則必須重建網站快取才能更新「資源」面板。

當您移除網站中特定顏色或 URL 的唯一實體時,或是所儲存的新檔案含有網站中尚未使用的顏色或 URL 時,這些變更都要等到重新整理「網站」清單後,才會顯示在「資源」面板中。

  • 若要手動重新整理「網站」清單,請按一下「重新整理網站清單」按鈕 。Dreamweaver 會視需要建立或更新網站快取。
  • 若要重新整理「網站」清單並手動重建網站快取,請在「資源」清單中按一下右鍵 (Windows) 或 Command + 按一下 (Macintosh),然後選取「重新整理網站清單」。

在文件中新增資源

您可以將資源拖曳到「文件」視窗的「即時檢視」、「程式碼檢視」和「設計檢視」,或是使用面板的「插入」按鈕,將大部分的資源插入文件中。您可以從清單檢視與「資源」面板的預覽窗格拖曳資源。

注意:從預覽窗格拖曳只在 Mac 上支援。

您可以在設計或即時檢視中插入顏色和 URL。您可以在設計檢視中,將顏色和 URL 套用到所選取的元素。

 

  1. 在文件中,將插入點置於您想要資源出現的地方。

  2. 在「資源」面板中,從左側的資源類別按鈕中進行選取。

    註解:

    請選取「範本」以外的任何類別。範本會套用到整份文件,而不能插入至文件中。

  3. 選取面板頂部的「網站」或「最愛」,然後再選取資源。

    圖庫項目沒有「網站」或「最愛」清單;請在插入圖庫項目時略過這個步驟。

  4. 請執行下列其中一項作業:
    • 將資源從面板拖曳到文件。您可以從清單檢視與預覽窗格拖曳。

      注意:您不能在 Windows 上從預覽窗格拖曳資源。

      您可以將 Script 拖曳到「文件」視窗的檔頭內容區域;如果沒有顯示這個區域,請選取「檢視 > 檔頭內容」。

    • 選取面板中的資源,並按一下「插入」。

      如果插入的資源為顏色,將會套用到插入點之後出現的文字。

使用資源面板將顏色套用到文字

「資源」面板會顯示您已套用到各種元素 (例如文字、表格邊框、背景等) 的顏色。

  1. 在設計檢視中,執行以下步驟:

    1. 選取文件中的文字。
    2. 在「資源」面板中,選取「顏色」類別。

    3. 選取所需的顏色,然後按一下「套用」。

  2. 在即時檢視中,執行以下步驟:

    1. 在「資源」面板中,選取「顏色」類別。

    2. 請執行下列其中一項作業:

      • 以滑鼠右鍵按一下「資源」面板中的顏色,然後按一下「複製顏色值」。顏色值會複製到您的剪貼簿。現在您可以在 CSS 設計工具中貼上顏色值 (Ctrl+v、Cmd+v)。
      • 從預覽拖曳顏色,並將滑鼠停留在即時檢視中元素的上方。放下顏色時會出現「新增 CSS 規則」對話方塊,然後按一下「確定」時,顏色會套用到所選取的元素。
      • 在「資源」面板中按一下「套用」。「新增 CSS 規則」對話方塊隨即顯示,當您按一下「確定」時,顏色會套用到所選取的元素。

將 URL 指定給影像或文字

  1. 在設計檢視中,執行以下步驟:

    1. 選取文字或影像。
    2. 在「資源」面板中,視儲存 URL 的位置而定,選取「網站」或「最愛」檢視中的 URL 類別。

      註解:

      根據預設,網站檔案的 URL 會儲存在「網站」檢視中。「最愛」檢視會保留您自己加入的 URL。

    3. 選取 URL。
    4. 請執行下列其中一項作業:
      • 將 URL 從面板拖曳到「設計」檢視中的選取範圍。

      • 選取 URL,然後按一下「插入」。

  2. 在即時檢視中,執行以下步驟:

    1. 在「資源」面板中,視儲存 URL 的位置而定,選取「網站」或「最愛」檢視中的 URL 類別。

    2. 請執行下列其中一項作業:

      • 從預覽或清單檢視拖曳該 URL。將滑鼠停留在即時檢視中元素的上方。放下 URL 時,<a> 會圍繞即時檢視中反白標示的元素。
      • 按一下「即時檢視」中的必要元素。選擇「資源」面板中的 URL,然後按一下「套用」。所選取的元素由 <a> 標籤圍繞。

選取和編輯資源

「資源」面板可以讓您一次選取多個資源, 也提供了一種開始編輯資源的快速方法。

選取多個資源

  1. 在「資源」面板中,選取資源。
  2. 以下列其中一種方式選取其他資源:
    • Shift + 按一下以選取一連串連續的資源。

    • Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh),可將個別的資源加入選取範圍 (即使是與目前選取範圍不相鄰的資源亦可)。Control + 按一下或 Command + 按一下已選取的資源,便可取消選取。

編輯資源

在編輯「資源」面板中的資源時,其行為可能會因資源的類型而有不同。對於某些資源 (例如影像) 而言,您會使用外部編輯器;如果您已為該資源類型定義編輯器,該編輯器便會自動開啟。您只能在「最愛」清單中編輯顏色和 URL。編輯範本和圖庫項目時,您會在 Dreamweaver 中進行變更。

  1. 在「資源」面板中,請執行下列其中一項作業:
    • 在這個資源按兩下。

    • 選取資源,然後按一下「編輯」按鈕。

    註解:

    如果必須在外部編輯器中編輯資源,但編輯器不會自動開啟時,請選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh),再選取「檔案型態/編輯器」類別,然後確定您已為該資源類型定義外部編輯器。

  2. 進行所要的變更。
  3. 完成上述步驟之後,請執行下列任一項作業:
    • 如果資源是檔案架構的資源 (顏色或 URL 以外的任何項目),請加以儲存 (透過所使用的編輯器),然後將它關閉。

    • 如果資源是 URL,請按一下「編輯 URL」對話方塊中的「確定」。

    註解:

    如果資源是顏色,在您挑選顏色後,顏色挑選器就會自動關閉。若要關閉顏色挑選器而不挑選顏色,請按 Esc 鍵。

將資源重複使用於另一個網站

「資源」面板會顯示目前網站的所有資源 (可辨認的類型)。若要將目前網站的資源用於另一個網站,您必須將其複製到這個網站。您可以複製個別資源、一組個別資源,或一次複製整個「最愛」資料夾。

與遠端網站互傳資源之前,您可能必須先從「檔案」面板找出對應於「資源」面板中資源的檔案。

註解:

「檔案」面板顯示的網站,可能會與「資源」面板所顯示的不同, 這是因為「資源」面板是與作用中文件相關聯。

找出檔案面板中的資源檔案

  1. 在「資源」面板中,選取您要尋找的資源類別。
  2. 在「資源」面板中,以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 資源的名稱或圖示,再從快速選單中選取「指出在網站中位置」。

    註解:

    「指出在網站中位置」無法用於尋找顏色和 URL,因為它們並不與網站中的檔案相對應。

    然後便會開啟「檔案」面板,並選取了這個資源檔案。請注意,「指出在網站中位置」命令會尋找與資源本身對應的檔案,而非尋找使用此資源的檔案。

將資源面板中的資源複製到另一個網站

  1. 在「資源」面板中,選取您要複製的資源類別。
  2. 以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh)「網站」清單或「最愛」清單中的一或多個資源,再選取「複製到網站」,然後從列出您所定義之全部網站的子選單中,選取目標網站名稱。

    註解:

    在「最愛」清單中,可以複製「最愛」資料夾以及個別資源

    這些資源會複製到目標網站中的對應位置。Dreamweaver 會視需要在目標網站的階層中建立新資料夾。這些資源也會加入目標網站的「最愛」清單中。

    註解:

    如果您所複製的資源為顏色或 URL,則只會顯示在目標網站的「最愛」清單中。因為顏色和 URL 並沒有對應的檔案,所以沒有檔案可以複製到另一個網站中。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策