Adobe Creative Cloud

December 11, 2014 /Dreamweaver Interface /

Dropcaps: Easily Create Drop Caps in Dreamweaver CC

Using CSS to create drop caps in your design can be cumbersome. If you’ve used dropcap.js, you know it’s a much easier way to realize your design. The good news? We’ve made it even easier for Dreamweaver CC users with a native dropcap.js extension called Dropcaps.

Now you can enlarge the first letter of a paragraph or section of text to catch readers’ attention and jazz up your design.

 

Dropcap first character

Dropcap first character

Let’s take a look how you can do that in a few easy steps:

Installing the Dropcaps extension

  1. Quit Dreamweaver CC.
  2. Make sure you have installed the Creative Cloud Desktop App. 
  3. Make sure sync-files feature is turned on and not paused. 
  4. Make sure you have installed a compatible Adobe application.
  5. Install the Dropcaps extension from the Adobe Add-ons page.
  6. Check that you have acquired your Add-on.
  7. Restart Dreamweaver CC 2014.1 so that the Add-on can be enabled.

Using the Dropcap extension

  1. Launch Dreamweaver CC.
  2. Open your web page in Dreamweaver.
  3. Select the required paragraph:
    • If you are in Live View, simply click the text element.
    • If you are in Code View, position the cursor inside the text or tag, or select the text.
  4. Open the Dropcaps extension dialog box by selecting Window > Extensions > Dropcaps, or by using the Keyboard shortcut = Cmd+Alt+L on Mac; Ctrl+Alt+L on Windows.
  5. Specify the following details in the Dropcaps extension dialog box (see Figure 1):
    • Height: Number of lines that the height of the drop caps element spans. Counting is from top to bottom.
    • Baseline (optional): The line number to which the base of the drop caps element aligns with. Counting is from top to bottom. (Default value: same as height)

No. of characters (optional): The no. of characters to which the drop caps effect should be applied. (default: 1)

Dropcaps Extension

Dropcaps Extension

 

  1. Click “OK”.
  2. File > Save to confirm changes.

Note: An ‘extDropcaps’ folder gets created in the same directory as your web page. This folder contains the JavaScript for the drop cap effect, and needs to be uploaded to your publishing server along with the rest of the files and scripts.

To edit the drop cap’s properties, select the text element, open the Dropcaps extension, and edit its values.

That’s it! You’re done. Please follow us on Facebook or Twitter so you can always get the latest Dreamweaver news.

Best,

The Dreamweaver Team

 

Dreamweaver Interface

Join the discussion

  • By Aaron - 10:31 PM on May 18, 2015  

    Is there a way to make this work with responsive webpages? As it is right now, the dropcap gets out of line when the page is resized.