使用手冊 取消

Dreamweaver 中的 Creative Cloud Libraries

 

 

透過 Adobe Stock 及使用其他 Adobe 應用程式,於不同的 Dreamweaver 專案中瀏覽、管理及取用創意資產。

Creative Cloud Libraries 讓您可隨處使用您喜愛的資產。您可以在幾個 Creative Cloud 桌面和行動應用程式中製作或擷取影像、顏色、文字樣式等內容,然後輕鬆地在其他桌面和行動應用程式之間取用,體驗流暢的創作工作流程。

您可以直接從 Dreamweaver 內存取 CC Libraries,以便在網頁中重複使用顏色和圖形。您也可以將圖形插入為「連結」資產,讓插入的圖形與雲端中的圖形保持同步。

如需詳細資訊,請參閱「使用 Dreamweaver 中的 CC Libraries」。

CC Libraries 面板

「CC Libraries」面板 (「視窗 > CC Libraries」) 是您儲存在 Creative Cloud 上之資產的主要取用位置。此面板也可讓您搜尋 Adobe Stock 中的資產。

CC Libraries 面板
CC Libraries 面板

此面板可供您:

  • 瀏覽特定資料庫,以找出儲存在該資料庫中的資產
  • 建立資料庫
  • 預覽選定資料庫中的資產
  • 將要插入的資產拖曳或複製到您的網頁上
  • 輸入關鍵字 (例如影像的完整名稱或部分名稱) 以便在 Adobe Stock 上搜尋

快速入門

在 Dreamweaver 中定義網站

Dreamweaver 中的網站是用來儲存與您的網頁相關之所有影像、視訊、指令碼、樣式表和其他檔案的一個資料夾。事先定義網站可幫助您輕鬆地將從 CC Libraries 匯入的資產儲存到網站上。請確定您想要從 CC Libraries 匯入資產到其中的網頁也儲存在網站資料夾中。

如需建立網站的詳細資訊,請參閱設定網站的本機版本

將資產新增至 CC Libraries

確定所有必要的資產都可以在 Creative Cloud 上取用,可幫助您快速地將資產匯入 Dreamweaver 的網頁中。

如果您要尋找 Stock 影像,最好的方式是從 Adobe Stock 開始。如需詳細資訊,請參閱從 Adobe Stock 取得資產

您從各種 Adobe 行動和桌面應用程式擷取或建立的圖形和顏色都可以儲存在 Creative Cloud 並匯入至您的網頁中。例如,使用 Adobe Shape CC 建立的向量圖形或是使用 Photoshop 處理過的影像。Creative Cloud 也可讓您和您的團隊共同作業及共用資產,如此一來,您也可以重複使用其他人所建立的資產。

如需 Creative Cloud Libraries 的詳細資訊,請參閱 Creative Cloud Libraries

從 Adobe Stock 取得資產

Adobe Stock 與 Creative Cloud Libraries 已密切整合。您可以透過以下其中一個方式搜尋影像,並將影像新增至任何 CC Libraries:

  • 直接從 Adobe Stock 網站。
  • 在 Dreamweaver 中使用「CC Libraries」面板。
  • 在其他 Adobe 應用程式中使用「CC Libraries」面板,例如 Photoshop 和 Illustrator。

在您將影像新增至 CC 資料庫後,您就可以依照重複使用 CC Libraries 中的圖形主題的指示,在您的網頁中使用這些影像。

如果您不確定是否要立刻購買 Stock 影像,可以先將加上浮水印的 Stock 影像 (預覽) 新增至您的資料庫,並使用這些影像當做預留位置。當您準備要購買這些影像時,可以在 Dreamweaver 和其他應用程式的「CC Libraries」面板中購買,也可以直接從 Adobe Stock 網站購買。 

使用「CC Libraries」面板在 Adobe Stock 搜尋影像
使用「CC Libraries」面板在 Adobe Stock 搜尋影像

當您授權影像時,在開啟的文件中所有加上浮水印的資產都會更新為高解析度的授權影像版本。

重複使用儲存在 CC Libraries 中的顏色和顏色主題

在即時檢視中重複使用顏色和顏色主題

您可以從 Illustrator、Photoshop 或 Adobe Color CC 等應用程式中,將顏色和顏色主題儲存在 Creative Cloud Libraries 中。使用下列步驟,您就可以透過 Dreamweaver 中的「CC Libraries」面板,將這些顏色和顏色主題匯入您的網頁:

  1. 在「CC Libraries」面板中,執行下列其中一個動作:

    • 按一下所需的顏色或顏色主題。該顏色或顏色主題的 HEX 值便會複製到剪貼簿。
    • 在所需的顏色或顏色主題上按一下滑鼠右鍵,然後按一下「複製 RGB」或「複製 HEX」。 
  2. 在程式碼檢視或 CSS 設計工具中貼上顏色值。

在程式碼檢視中重複使用顏色

儲存在 Creative Cloud 上的顏色可用來做為「程式碼」檢視中的程式碼提示。在「程式碼」檢視中編寫程式碼時,您可以從程式碼提示中選取所需的顏色。程式碼提示中顏色旁邊的 Creative Cloud 圖示會指出這些顏色是儲存在 Creative Cloud 中。

Creative Cloud Library 中的顏色顯示在程式碼提示中
Creative Cloud Library 中的顏色顯示在程式碼提示中

程式碼提示會從目前在「CC Libraries」面板中開啟的資料庫挑選顏色。在上述的影像中,「My Library」資料庫中的顏色會提供為程式碼提示。若要取得另一個 Creative Cloud Library 中的顏色當做程式碼提示,請在「CC Libraries」面板中開啟所需的資料庫,然後繼續您在程式碼檢視中的工作。

重複使用儲存在 CC Libraries 中的圖形

自 2021 年 11 月 16 日起,Dreamweaver 已中止支援從 Illustrator 資產擷取 SVG 的功能。我們鼓勵您使用此因應措施來啟用影像格式選項,並將 Illustrator(.ai) 資產轉換為 PNG 32/PNG 24/PNG 8/JPEG 格式。或者,用戶也可以從 Illustrator 應用程式將 Illustrator 資產匯出為 SVG 格式

您可以將使用 Adobe 桌面和行動應用程式 (例如 Photoshop、Illustrator、Adobe Shape CC 或 Adobe Sketch CC) 所建立的圖形儲存到 Creative Cloud Libraries 中。「CC Libraries」面板可幫助您將圖形插入即時檢視中,而程式碼提示則可幫助您直接將圖形插入您的程式碼。

您可透過下列形式插入 CC Libraries 中的圖形:

  • 已連結資產:將圖形插入為已連結資產時,即時檢視中資產的右下角會出現小雲朵圖示。此圖示指出資產已連結至雲端上的原始資產。雲端圖示也會顯示在「資產」面板中該資產的旁邊。
  • 未連結資產:您可以在網頁中將資產以本機複本的形式插入。在即時檢視中,於「CC Libraries」面板中所需的資產上按一下滑鼠右鍵,然後選取「插入未連結」。當您插入圖形複本時,該資產就會複製到本機電腦,而不會連結至雲端上的原始資產。這表示,雲端上資產的任何變更或更新都不會反映在 Dreamweaver 中。

您也可以批次下載資產,並儲存到電腦上以供日後使用。

在即時檢視中重複使用圖形

  1. 執行以下任一動作:

    1. 將圖形從「CC Libraries」面板拖曳到即時檢視的頁面上。

      注意:當您將圖形從「CC Libraries」面板拖曳到「即時」檢視時,圖形會以「已連結」圖形的形式插入 (若您已定義網站)。

      Illustrator 檔案預設會插入做為網頁最佳化的 SVG 檔案。如果您要自訂 SVG 檔案的屬性,可編輯 options.json 檔案中的偏好設定。如需詳細資訊,請參閱「從 CC Libraries 擷取網頁最佳化的 SVG 檔案」。

    2. 在「CC Libraries」面板中所需的資產上按一下滑鼠右鍵,然後選取:

      • 「插入已連結」可將圖形以已連結資產的形式插入。這表示資產會維持其雲端上對應資產的參照。雲端上資產的任何變更都會反映在 Dreamweaver 中的已連結資產上。
      • 「插入未連結」可將圖形以未連結資產的形式插入。
  2. 在出現的「取樣」對話方塊中,指定影像的檔案名稱和尺寸。如需詳細資訊,請參閱指定圖形的取樣選項

在程式碼檢視中重複使用圖形

儲存在 Creative Cloud Libraries 中的圖形可用來做為「程式碼」檢視中的程式碼提示。首先,在「CC Libraries」面板中選取所需的資料庫以將它開啟。然後切換到「程式碼」檢視,並在編寫程式碼時從程式碼提示中選取所需的圖形。程式碼提示中圖形旁邊的 Creative Cloud 圖示會指出該圖形是儲存在 Creative Cloud 中。

CC Libraries 中的圖形顯示為程式碼提示
CC Libraries 中的圖形顯示為程式碼提示

注意:當您使用程式碼提示插入圖形時,圖形會以「未連結」圖形的形式插入。

若要取得另一個 Creative Cloud Library 中的顏色當做程式碼提示,請在「CC Libraries」面板中開啟所需的資料庫,然後繼續您在程式碼檢視中的工作。

指定圖形的取樣選項

「高度」和「寬度」方塊會使用 Dreamweaver 影像最佳化引擎來重新取樣資產。您也可以選取要置入資產的格式類型。已啟用雲端圖示會指出資產將以已連結資產的形式置入。在指定檔案名稱和取樣選項之後,請按 Enter 鍵以插入資產。

影像重新取樣
影像重新取樣

注意:

  • SVG 選項僅供 Illustrator (.ai) 檔案使用,而且會設定為這類檔案的預設值。您可以使用「重新取樣」對話方塊中的下拉式清單,將這類檔案的格式變更為 JPEG。
  • JPEG 檔案只能以 JPEG 檔案的形式插入,因此這類檔案沒有其他格式選項可以使用。

編輯圖形

使用「CC Libraries」面板,您可以快速在 InDesign 和 Illustrator 原生應用程式中,開啟及編輯其資產。若要這麼做,請在「CC Libraries」面板中的資產上按一下滑鼠右鍵,然後選取「編輯」。

請確認原生應用程式 (InDesign 或 Illustrator) 與您使用的 Dreamweaver 執行個體安裝在相同的電腦上。此外,也請確認您已從 Creative Cloud 安裝這些應用程式的最新更新。

取消連結、重新取樣及重新命名已連結圖形

您可以使用下列其中一個選項,針對您從 CC Libraries 匯入至網頁的影像,變更影像的名稱、大小或重新取樣:

  • 按一下「即時」檢視中的資產,然後按一下雲端圖示。 
  • 以滑鼠右鍵按一下資產,然後按一下「已連結資產選項」。
  • 按兩下「資產」面板中顯示於該資產名稱旁邊的雲端圖示。

「重新取樣」對話方塊便會顯示,讓您變更所需的屬性。若要將此資產與 CC Libraries 中的來源取消連結,請按一下「重新取樣」對話方塊中的雲端圖示。

當您取消資產的連結時,針對 Creative Cloud 上的來源檔案所做的任何變更都不會反映在網頁的影像中。

下載圖形

您可以從 CC Libraries 大量下載所需的圖形做為已連結資產,並於稍後在專案中插入這些圖形。當您在專案中使用這些資產時,它們仍然會維持對應圖庫項目的連結。 

  • 已連結:若要下載圖形做為已連結資產,請在「CC Libraries」面板中以滑鼠右鍵按一下資產,然後選取「下載已連結」。隨即顯示包含檔案名稱和重新取樣選項的快顯視窗選單。指定檔案名稱和取樣選項,然後按 Enter 鍵,即可將資產儲存在您的網站資料夾中。
  • 未連結:若要下載圖形做為未連結資產,請在「CC Libraries」面板中以滑鼠右鍵按一下所需的資產,然後選取「下載複本」。隨即顯示包含檔案名稱和重新取樣選項的快顯視窗選單。指定檔案名稱和取樣選項,然後按 Enter 鍵,即可將資產儲存在您的網站資料夾中。

更快、更輕鬆地獲得協助

新的使用者?