User Guide Cancel

Creative Cloud Libraries in Dreamweaver

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Browse, manage, and access creative assets across Dreamweaver projects with Adobe Stock and using other Adobe apps.

Creative Cloud Libraries make your favorite assets available to you anywhere. You can create or capture images, colors, text styles, and more in several Creative Cloud desktop and mobile apps, and then easily access them across other desktop and mobile apps for a seamless creative workflow.

You can access CC Libraries right from within Dreamweaver to reuse colors and graphics in your web pages. You can also keep the inserted graphics up-to-date with those on the cloud by inserting them as 'linked' assets.

Read on for more information on using CC Libraries in Dreamweaver.

The CC Libraries panel

The CC Libraries panel (Window > CC Libraries) is the main access point to your assets saved on Creative Cloud. The panel also lets you search for assets in Adobe Stock.

CC Libraries panel
CC Libraries panel

Using this panel, you can:

  • Browse a specific library for the assets stored in the library
  • Create a library
  • Preview assets in the selected library
  • Drag or copy assets to be inserted onto your web page
  • Enter a key word, such as, full name or part of a name of an image to search on Adobe Stock

Getting started

Define a site in Dreamweaver

A site in Dreamweaver is a folder where all the images, videos, scripts, stylesheets, and other files related to your web pages are stored. Defining a site upfront helps you easily save the assets that you import from CC Libraries to the site. Ensure that the web page into which you want to import assets from CC Libraries is also saved in the site folder.

For information on creating sites, see Set up a local version of your site.

Add assets to CC Libraries

Ensuring that all the required assets are available on Creative Cloud helps you import the assets into your web page in Dreamweaver quickly.

If you are looking for stock images, then Adobe Stock is a good place to start with. For detailed information, see Get assets from Adobe Stock.

Graphics and colors that you capture or create from various Adobe mobile and desktop apps can be stored on Creative Cloud and imported into your web pages. For example, a vector graphic created using Adobe Shape CC or an image processed using Photoshop. Creative Cloud also lets you and your team collaborate and share assets, so you can reuse assets created by others too.

For more information on Creative Cloud Libraries, see Creative Cloud Libraries.

Get assets from Adobe Stock

Adobe Stock is deeply integrated with Creative Cloud Libraries. You can search for images and add them to any of your CC Libraries in one of the following ways:

  • Directly from the Adobe Stock website.
  • Using the CC Libraries panel in Dreamweaver.
  • Using the CC Libraries panels in other Adobe applications, such as Photoshop and Illustrator.

Once you add the images to a CC Library, you can follow the instructions in the Reuse graphics in CC Libraries topic to use these images in your web pages.

If you are unsure about purchasing Stock images right away, you can add only wartermarked Stock images (previews) to your libraries and use these images as placeholders. When you are ready to purchase these images, you can do so in the CC Libraries panel in Dreamweaver and other apps, or directly from the Adobe Stock website. 

Searching for images on Adobe Stock using CC Libraries panel
Searching for images on Adobe Stock using CC Libraries panel

When you license an image, all instances of the watermarked asset in your open documents are updated to the high-resolution version of the licensed image.

Reuse colors and color themes saved in CC Libraries

Reuse colors and color themes in Live view

You can save colors and color themes in your Creative Cloud Libraries from apps such as Illustrator, Photoshop, or Adobe Color CC. You can import these colors and color themes in your web pages using the CC Libraries panel in Dreamweaver using the following steps:

  1. In the CC Libraries panel, perform one of the following actions:

    • Click the required color or color theme. The HEX value of the color or color theme is copied to the clipboard.
    • Right-click the required color or color theme, and then click Copy RGB or Copy HEX. 
  2. Paste the color value in Code view or CSS Designer.

Reuse colors in Code view

Colors saved on Creative Cloud are available as code hints in Code view. You can select the required colors from the code hints as you code in Code view. The Creative Cloud icon adjacent to the color in code hints indicates that these colors are stored on Creative Cloud.

Colors in Creative Cloud Library displayed in code hints
Colors in Creative Cloud Library displayed in code hints

The code hints pick colors from the library that is currently opened in the CC Libraries panel. In the image above, colors in the library 'My Library' are made available as code hints. To get colors in another Creative Cloud Library as code hints, open the required library in the CC Libraries panel and then resume your work in Code view.

Reuse graphics saved in CC Libraries

You can save graphics created using Adobe desktop and mobile apps, such as, Photoshop, Illustrator, Adobe Shape CC, or Adobe Sketch CC, in your Creative Cloud Libraries. The CC Libraries panel helps you insert graphics into Live view and the code hints help you insert graphics directly into your code.

You can insert graphics from CC Libraries as:

  • Linked assets: When graphics are inserted as linked assets, a small cloud icon appears at the lower right corner of the asset in Live view. This icon indicates that the asset is linked to the original asset on the cloud. The cloud icon is also displayed adjacent to the asset in the Assets panel.
  • Unlinked assets: You can insert an asset as a local copy in your web pages. In Live view, right-click the required asset in the CC Libraries panel, and select 'Insert Unlinked'. When you insert a copy of a graphic, the asset is copied to your local machine and is not linked to the original asset on the cloud. This means, any changes or updates to the asset on the cloud is not reflected in Dreamweaver.

You can also batch download assets and save on your computer for later use.

Reuse graphics in Live view

  1. Perform one of the following actions:

    1. Drag the graphic from the CC Libraries panel onto your page in Live view.

      Note: When you drag graphics from the CC Libraries panel onto Live view, the graphic is inserted as a 'Linked' graphic (if you have defined a site).

      Illustrator files are inserted as web-optimized, SVG files by default. If you want to customize the properties of SVG files, you can edit the preferences in options.json file. For more information, see Extract web-optimized SVG files from CC Libraries.

    2. Right-click the required asset in the CC Libraries panel, and select:

      • 'Insert Linked' to insert the graphic as a linked asset. This means that the asset will maintain its reference to the corresponding asset on the cloud. Any change to the asset on the cloud will be reflected in the linked asset in Dreamweaver.
      • 'Insert Unlinked' to insert the graphic as an unlinked asset.
  2. In the Sampling dialog box that appears, specify the file name and the dimensions of the image. For detailed information, see Specify sampling options for graphics.

Reuse graphics in Code view

Graphics saved in your Creative Cloud Libraries are available as code hints in Code view. First, open the required library by selecting it in the CC Libraries panel. Then, switch to Code view and select the required graphic from the code hints as you code. The Creative Cloud icon adjacent to the graphic in code hints indicates that the graphic is stored on Creative Cloud.

Graphics in CC Libraries displayed as code hints
Graphics in CC Libraries displayed as code hints

Note: When you insert graphics using code hints, the graphics are inserted as 'unlinked' graphics.

To get colors in another Creative Cloud Library as code hints, open the required library in the CC Libraries panel and then resume your work in Code view.

Specify sampling options for graphics

The Height and Width boxes resample the asset using the Dreamweaver image optimization engine. You can also select the format type in which you want the asset to be placed. The enabled cloud icon indicates that the asset will be placed as a linked asset. After specifying the file name and sampling options, press Enter to insert the asset.

Resampling images
Resampling images

 Note:

  • The SVG option is available for Illustrator (.ai) files only and is set as default for such files. You can change the format of such files to JPEG using the drop-down list in the resampling dialog box.
  • A JPEG file can be inserted only as a JPEG file, and so no other format option is available for such files.

Edit graphics

Using the CC Libraries panel, you can quickly open and edit InDesign and Illustrator assets in their native applications. To do so, right-click the asset in the CC Libraries panel, and then click Edit.

Ensure that the native applications - InDesign or Illustrator - are installed on the same computer as the Dreamweaver instance you are using. Also, ensure that you have installed the latest updates to these applications from Creative Cloud.

Unlink, resample, and rename linked graphics

You can change the name, size, or resample images imported into your web page from CC Libraries using one of the following options:

  • Click the asset in Live view and then click the cloud icon. 
  • Right-click the asset and click Linked asset options.
  • Double-click the cloud icon adjacent to the asset name in the Assets panel.

The resampling dialog box appears to let you change the required properties. To unlink the asset from its source in CC Libraries, click the cloud icon in the resampling dialog box.

When you unlink an asset, any changes to the source file on Creative Cloud will not be reflected in the image in your web page.

Download graphics

You can download the required graphics as linked assets from CC Libraries in bulk and insert them in your project at a later point in time. When you use these assets in your projects, they will still maintain the link to the corresponding library item. 

  • Linked: To download graphics as linked assets, right-click the asset in CC Libraries panel and select Download Linked. The popup with filename and resampling options is displayed. Save the asset in your site folder by specifying the filename and sampling options, and pressing Enter.
  • Unlinked: To download graphics as unlinked assets, right-click the required asset in the CC Libraries panel and select Download Copy. The popup with filename and resampling options is displayed. Save the asset in your site folder by specifying the filename and sampling options, and pressing Enter.

 Adobe

Get help faster and easier

New user?