使用手冊 取消

Dreamweaver 中的 Creative Cloud Libraries

  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站
  19. 疑難排解
    1. 已修正的問題
    2. 已知問題

 

 

透過 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 鍵,即可將資產儲存在您的網站資料夾中。

更快、更輕鬆地獲得協助

新的使用者?