使用資源

上次更新時間 2024年4月25日

使用 Dreamweaver 中的「資源」面板來管理目前網站中的資源。

您可以使用 Adobe Dreamweaver 來記錄和預覽您網站中所儲存的「資源」,例如影像、影片、顏色、Script 及連結。 另外,也可以直接拖曳資源,將它插入目前文件的頁面中。

您可以從各種不同來源取得資源。 例如,您可能在 Adobe Photoshop 或 Adobe Animate 等應用程式中建立資產,或從同事那裡收到資產,或從美工圖案 CD 或圖形網站複製資產。

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 檔案中的指令碼 (而非單獨的 JavaScript 或 VBScript 檔案) 並不會顯示在「資源」面板中。 此類別僅在「程式碼」和「設計」檢視中可用。

範本

用於多個頁面的主要頁面版面。 修改範本會自動修改附加至該範本的所有頁面。 此類別僅在「程式碼」和「設計」檢視中可用。

資料庫項目

用於多個頁面的設計元素;當您修改圖庫項目時,含有該項目的所有頁面都會更新。 此類別僅在「程式碼」和「設計」檢視中可用。

備註

若要顯示在「資源」面板中,檔案必須屬於下列其中一個類別。 其他某些檔案類型有時也稱為資源,但是不會顯示在面板中。

根據預設, 類別中的資產會依名稱按字母順序列出,但您 可以依類型和其他幾個條件來排序。您也可以預覽 資產,以及調整欄和預覽區域的大小。

「類型」欄中的 Creative Cloud 圖示可指示對應的資源是從 Creative Cloud Libraries 中匯入的。 您可以按兩下 Creative Cloud 圖示來重新取樣對應的資源。 如需有關在 Creative Cloud Libraries 中重複使用資產的更多資訊,請參閱 Dreamweaver 中的 Creative Cloud Libraries

檢視預覽區域中的資源

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

顯示類別中的資源

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

排序資源

按一下欄標題。

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

調整欄的大小

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

調整預覽區域的大小

向上或向下拖曳分隔符號列 (在預覽 區域與資產清單之間)。

重新整理資源面板

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

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

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

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

在文件中新增資源

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

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

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

 

在文件中,將插入點放在您希望資產出現的位置。

在「資產」面板中,從左側的資產類別按鈕中選取。
備註

請選取「範本」以外的任何類別。 模板會套用至整個文件;無法將其插入文件中。

在面板頂部選取「地點」或「我的最愛」,然後選取資產。

資料庫項目沒有「地點」或「我的最愛」清單;如果您要插入資料庫項目,請略過此步驟。

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

    注意:在 Windows 上,您無法從預覽窗格拖曳資產。

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

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

    如果插入的資源為顏色,便會套用到插入點之後所顯示的文字。

使用「資產」面板將色彩套用至文字

「資產」面板會顯示您已套用至各種元素的色彩,例如文字、表格邊框、背景等。

在「設計」檢視中,執行下列步驟:

選取文件中的文字。

在「資產」面板中,選取「色彩」類別。

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

在「即時」檢視中,執行下列步驟:

在「資產」面板中,選取「色彩」類別。

執行下列其中一項作業:

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

將 URL 指定給影像或文字

在「設計」檢視中,執行下列步驟:

選取文字或影像。

在「資產」面板中,根據 URL 的儲存位置,在「地點」或「我的最愛」檢視中選取「URL」類別。

備註

您網站檔案的 URL 預設會儲存在 Sites 視圖中。「我的最愛」檢視包含您自己新增的 URL。

選取 URL。
請執行下列其中一項作業:
  • 將 URL 從面板拖曳至「設計檢視」中的選取項目。

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

在「即時檢視」中,執行下列步驟:

在「資產」面板中,根據 URL 的儲存位置,在「網站」或「我的最愛」檢視中選取 URL 類別。

執行下列其中一項作業:

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

選取和編輯資源

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

選取多個資源

在「資源」面板中,選取資源。
以下列其中一種方式選取其他資源:
  • 按住 Shift 並按一下,以選取連續的資產數列。

  • 按住 Ctrl (Windows) 或 Command (Macintosh) 並按一下,以將個別資產新增至選取項目 (無論是否與現有選取項目相鄰)。按住 Ctrl 或 Command 並按一下選取的資產以將其取消選取。

編輯資源

當您在「資產」面板中編輯資產時,行為會根據資產類型而有所不同。對於影像等某些資產,您需要使用外部編輯器。如果您已為該資產類型定義編輯器,外部編輯器會自動開啟。您只能編輯「我的最愛」清單中的色彩和 URL。當您編輯範本和資料庫項目時,您需要在 Dreamweaver 中進行變更。

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

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

備註

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

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

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

備註

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

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

「資產」面板會顯示目前網站中的所有資產 (可辨識類型)。若要在另一個網站中使用目前網站的資產,您必須將其複製到其他網站。您可以一次複製個別資產、一組個別資產或整個「我的最愛」檔案夾。

您可能需要在「檔案」面板中找出與「資產」面板中資產對應的檔案,然後再將資產傳輸至遠端網站或從遠端網站傳輸資產。

備註

「檔案」面板可能會顯示與「資產」面板不同的網站。這是因為「資產」面板與主要文件相關聯。

在「檔案」面板中找出資產檔案

在「資產」面板中,選取您要尋找之資產的類別。
在 Windows 中按一下滑鼠右鍵或在 Macintosh 中按住 Control 鍵並按一下「資產」面板中的資產名稱或圖示,然後從內容選單中選取「在網站中尋找」。
備註

「在網站中尋找」對於色彩和 URL 不適用,因為它們不對應網站中的檔案。

「檔案」面板開啟,並選取資產檔案。「在地點尋找」指令會找出 對應到資產本身的檔案;它不會找出 使用該資產的檔案。

將資產從「資產」面板 複製到另一個地點

在「資產」面板中,選取 您要複製的資產類別。
在網站清單或我的最愛清單中,以滑鼠右鍵按一下 (Windows) 或按住 Control 鍵並按一下 (Macintosh) 一個或多個資產,選取「複製到網站」,然後從子選單中選取目標網站名稱,該子選單會列出您已定義的所有網站。
備註

在「我的最愛」清單中,您可以複製「我的最愛」資料夾 以及個別資產。

資產會複製到 目標地點中對應的位置。Dreamweaver 會視需要在目標網站的階層中建立新資料夾。資產也會新增到目標 地點的「我的最愛」清單中。

備註

如果您複製的資產是色彩或 URL,它只會出現在目標網站的「我的最愛」清單中。因為 色彩和 URL 不對應檔案,所以沒有檔案可複製到 其他地點。