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 Celebrates 17 Years of Web Development

Seventeen years of working on the web brings a level of experience some of Silicon Valley’s top tech entrepreneurs can’t match.

Many web development tools have come and gone in the last couple of decades, but Dreamweaver has continued to evolve and remain the choice tool of millions of web developers and designers around the world who are crafting the modern web.

In celebration of Dreamweaver’s 17th year on the market, we thought we’d take a look at the web and how we access it, now and then.

 

Dreamweaver CC: PSD to HTML and CSS

Our team continues to streamline and improve Dreamweaver. It has a modern UI, edit capabilities in Live View, CSS Designer and a 64-bit architecture. That’s not all though, it gets even better. It also has a complete integration of Extract which empowers users to easily go from PSD comp to code.

Extract enables web designers and developers to build web and mobile content from a Photoshop comp directly in Dreamweaver, bridging the gap between Photoshop and Dreamweaver, and reducing the need to go back and forth between the two.

Extract Panel

The Extract panel is where all the magic happens. You can easily extract CSS, images, fonts, colors, gradients, measurement and more to help build sites faster. If the panel is not opened by default, you can launch it as follows:

Figure 1

Figure 1: Launch the Extract panel in Dreamweaver

 

Extract Tutorial (onboarding experience)

We’ve added an onboarding experience to show how easily users can Extract info from a PSD. Click on any layer, text, or image to see how to easily extract info. To get going, click on the “Get Started” (see Figure 2) button on the top left corner.

Figure 2

Figure 2: To get going, click on the “Get Started” button.

 

View Photoshop documents in Dreamweaver

Once you click the “Get Started” button, the Extract panel will automatically sync to your Creative Cloud folders (see Figure 3). You have the following options to upload and view your PSD in Dreamweaver:

  • The “Upload PSD” button, which will upload your PSD to your Creative Cloud account directly from within Dreamweaver. (Figure 3).
Extract_Panel

Figure 3: View Photoshop documents in Dreamweaver

  • Browse your Creative Cloud account folders and select any PSD to get started.

Now that you have successfully uploaded and can view a PSD in the Extract panel, here are the things you can do with it:

Extract CSS

When a PSD is opened in the Extract panel, you can fully inspect the CSS that is pulled from Photoshop layers. When you select a layer, you’ll see all the CSS associated with that selection. Let’s see how that works:

  1. In the Extract panel, select any text or image layer in your PSD. You will get prompted with the resulting dialog (see Figure 4).
  2. Click on “Copy CSS”  to copy the CSS associated with that specific element.
  3. You can now paste it into your CSS document to edit or tweak your design.
Figure 4

Figure 4: Extract CSS code from PSD layers

 

Extract an image (PNG, PNG 8 Alpha, JPG)

Web designers and developers are now able to extract web-optimized images into their designs – all without leaving Dreamweaver.

  1. In the Extract panel (see Figure 5), select an image.
  2. Figure 5: Extract web-optimized images from a PSD.

  3. In the resulting dialog (see Figure 6), click on arrow  which will prompt you with another dialog where you can:
  • Set the folder location
  • Image format.
  • Image name.
Extract web-optimized Images

Figure 6

Layer tab

The Layer tab (see Figure 7) is a convenient way for web designers and developers to view the PSD structure and layers in one place. This tab enables them to:

  • View the PSD layers and structure in one place.
  • Toggle the eye icon next to the layers to show or hide that layer.
  • Click on arrow to download one or more layers.

Figure 7: The Layer tab is a convenient way to view the PSD structure and layers in one place.

 

Styles tab

No more guessing font names, sizes or styles. The styles tab (see Figure 8) enables you to inspect, copy and easily extract font styles, colors, and gradients as follows:

  • Click on Styles tab in the Extract panel.
  • Select any font to get font style, size, and colors.

Figure 8: The styles tab enables you to inspect, copy and easily extract font styles, colors, and gradients.

Where to go from here

Download Dreamweaver CC and explore the new Extract feature videos and tutorials to see how the new capabilities speed up your development process.

More on this topic:

Extract a Photoshop design into code in Dreamweaver

Extract Assets in a browser

In future blog posts, we will cover the new contextual code hinting, extract measurement, and the new drag and drop functionalities in the Extract panel. As always, we encourage you to provide your input and feedback on the latest release of Dreamweaver CC.

Best,

The Dreamweaver Team

 

Code View Gets a Makeover in Dreamweaver

One of the new features in the latest release of Dreamweaver CC is the introduction of Code View color themes. As one who enjoys playing with code, I was pleased to see some attention given to the view sometimes used as a last resort. Just as there are those who would only look under the hood of their car in the direst of circumstances, some Web designers only go to Code view when they can’t make their design edits work correctly in Design or Live View. This is especially true for new Dreamweaver users who have a limited coding background and are uncomfortable editing code. Going to Code View helps me understand what Dreamweaver is “thinking.”

Pages of code are very tedious to read. Changing a simple preference in the Edit menu to increase the font size for code is very helpful, especially when you are using Code View as an instructor in a lab with a projected screen. This is not a new feature, but sometimes overlooked by users.

Dreamweaver preferences

With the new color themes introduced in the latest release of Dreamweaver CC, you can do much more to make reading through code easier on your eyes (depending on your preferences) by choosing the way color is used for the different code view components. These themes are selected with the Edit/Preferences/Code Coloring/Theme option. The default color theme is Classic, the color scheme that you used in previous versions of Dreamweaver. With the latest release of Dreamweaver CC, however, you can choose between Raven, Slate, Blanch, or Geneva as a color theme, as shown below.

Raven
Raven Color Theme

Slate

Blanche

Blanche Color Theme

Geneva
Geneva Color Theme

These color themes introduce easy beginning points for developing your own preferences for the colors used for such components as the code background, foreground, and comments. You can even vary the colors for different document types, such as HTML and CSS. For example, I modified the background color of an automatic date in Code View for the Slate color theme from a light yellow to a light pumpkin color using the following steps:

    1. Select Edit on the Menu bar, select Preference, then select Code Coloring.

Preferences Panel

 

  1. Select Slate from the Theme drop-down menu.
  2. Select the Edit Theme Colors button.
  3. Select Date Object from the Styles for list menu, select the Background color box, then select a new color of your choice.
    Color Theme
  4. Select OK to close the Edit Coloring Scheme for HTML dialog box, select Apply in the Preferences dialog box to apply the changes, then select Close.

By selecting Apply, the new color background for all automatic date code is saved to my Slate theme and will retain the color change from session to session.

Thinking Ahead

I would love to have a highlighter tool in my Coding toolbar. With a highlighter tool, I could quickly highlight code when I was interrupted while working on a coding issue. Upon my return, I could quickly scan down the code to locate the issue. A highlighter tool would also be a great tool for instructors. When I was grading pages and pages of code for my web design students, I would ask the students to copy the code, paste it into Word, then highlight and number the code to be graded. This saved immense time. How lovely it would be to be able to highlight code in Dreamweaver! Would you be interested in a Code View highlighter tool?
—————————————————————————————————————————————————————————-

Sherry Bishop is an instructor emerita of Information Technology at North Arkansas College in Harrison, Arkansas. She is the author of several Adobe Dreamweaver books in the Cengage Revealed and Illustrated Series, the latest being Adobe Dreamweaver Creative Cloud Revealed. In addition to holding three endowed chairs in technology during an accomplished teaching career, Bishop was selected as the outstanding instructor at North Arkansas College in 2004 and given the NISOD Teaching Excellence Award in 2002 and 2004. In 2011, the Text and Academic Authors Association awarded her book Adobe Dreamweaver CS5 Revealed the Textbook Excellence Award for the outstanding textbook in College Computer Science/Engineering for 2011. Sherry enjoys traveling, gardening, photography, cooking, reading, and yoga.

Overview of the Enhanced CSS Designer and Element Quick View in Dreamweaver CC

The latest release of Dreamweaver CC has not only introduced new features, but also has major improvements to existing ones such as the CSS Designer and the Element Quick View. We’ve created a couple of videos to provide an overview of these features and the enhancements we’ve made in Dreamweaver CC.

CSS Designer

This video provides an overview of the CSS Designer panel and highlights the improvements to it. In this video you’ll learn how to:

  • Start a page design with the CSS Designer.
  • Work with the CSS Designer visual controls.
  • Use the panel’s workflow enhancements.

You’ll also take a look at how Live View integrates with the CSS Designer feature, making web design easier than ever.

Element Quick View

The Element Quick View panel lets you easily modify the HTML structure of your page with a tree view.  In this video you’ll get an overview of the feature and learn how to:

  • Use the Element Quick View to precisely insert elements into your website.
  • Easily edit the structure of your website.
  • View editable and dynamic (read-only) elements.

 

Where to go from here?

Download Dreamweaver CC and give these features a spin. Adobe has published thousands of free learning tutorials and videos for all skill levels: beginners, intermediate, and advanced. We encourage you to continue to provide your feedback and input as this is what shapes our products.

Best,

Dreamweaver Team


The New Dreamweaver is Here

Hello Web Pros!

The Dreamweaver team has been hard at work to bring you the latest release of Dreamweaver CC 2014, available for you to download right now.


So fresh, so clean  check out the new Dreamweaver interface

The 64-bit Modernization of Dreamweaver  

Over the last year, we’ve made a lot of improvements to Dreamweaver to make it easier for you to see edits in real-time without going to your browser, produce standards compliant code, and complete tasks more quickly in the streamlined user interface. We’ve also made substantial improvements to the underlying architecture of Dreamweaver to help you work more efficiently.

NEW Dreamweaver CC 2014 Tutorials

Get to know the new features in Dreamweaver CC 2014 with the help of a whole bunch of recently published tutorials. From managing your websites to ensuring HTML5-compliancy, we’ve got a round-up of the latest learning materials available below.

Learn how to…

Use Live Highlight, modernized Live View and CSS Designer

Get a rundown on new features including how to edit and preview web pages with new Live View features in this Dreamweaver CC video tutorial.

1_livehighlight

Be Part of the Story!

Dreamweaver + You = Great stories

We’re working hard to get the word out about the stories behind the great work our users are doing with Dreamweaver CC and we’re hoping you can help.

If you’ve recently created a website or app with Dreamweaver CC that you think is worth recognition, let us know. We’d like to help share with the world the great work you’ve done to inspire others to do the same.

So, how can I get involved?

It’s quite simple. All you need to do is complete a form. If we select your story, we’ll be in touch to bring it to life.