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.
Let’s take a look how you can do that in a few easy steps:
Installing the Dropcaps extension
- Quit Dreamweaver CC.
- Make sure you have installed the Creative Cloud Desktop App.
- Make sure sync-files feature is turned on and not paused.
- Make sure you have installed a compatible Adobe application.
- Install the Dropcaps extension from the Adobe Add-ons page.
- Check that you have acquired your Add-on.
- Restart Dreamweaver CC 2014.1 so that the Add-on can be enabled.
Using the Dropcap extension
- Launch Dreamweaver CC.
- Open your web page in Dreamweaver.
- 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.
- 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.
- 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)
- Click “OK”.
- File > Save to confirm changes.
To edit the drop cap’s properties, select the text element, open the Dropcaps extension, and edit its values.
The Dreamweaver Team