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
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.
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.
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:
- Launch Dreamweaver CC
- Window > Extract ( see Figure 1)
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.
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).
- 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:
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:
- In the Extract panel, select any text or image layer in your PSD. You will get prompted with the resulting dialog (see Figure 4).
- Click on “Copy CSS” to copy the CSS associated with that specific element.
- You can now paste it into your CSS document to edit or tweak your design.
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.
- In the Extract panel (see Figure 5), select an image.
- In the resulting dialog (see Figure 6), click on which will prompt you with another dialog where you can:
- Set the folder location
- Image format.
- Image name.
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 to download one or more layers.
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.
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.
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.
The Dreamweaver Team
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.
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.
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:
- Select Edit on the Menu bar, select Preference, then select Code Coloring.
- Select Slate from the Theme drop-down menu.
- Select the Edit Theme Colors button.
- Select Date Object from the Styles for list menu, select the Background color box, then select a new color of your choice.
- 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.
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.
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.
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.
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.
We’ve been keeping busy with this release for over a year, and as a result this is no ordinary update. This release contains groundbreaking functionality for taking your Photoshop documents to the web, new innovations in Live View, code improvements, and has been re-architected as a native 64-bit app for improved performance and stability.
What you’ll find in this release:
PSD Support with Extract
You can now browse and view your Photoshop documents stored in Creative Cloud directly within Dreamweaver, letting you rapidly take your designs to code. Yes, that’s right, you can open a fully layered PSD in Dreamweaver. When a PSD is loaded, you can extract CSS, colors, gradients, fonts, measurements and web-optimized images from your Photoshop layers when building your web projects. This will let you preserve the integrity of the design when bringing it to code, and takes the guesswork out of how that PSD will translate to web. No need to wait for a designer to send you a style guide or redline specs anymore!
Getting CSS and Images
When a PSD is loaded in Dreamweaver, you can fully inspect the CSS pulled from Photoshop layers. When you select a layer, you’ll see all the CSS associated with that selection. This is useful for grabbing colors, gradients, border-radius, font styles and more when building the front-end of your website. It’s kind of like Web Inspector for a PSD.
You can also code hint directly into a PSD, giving you full control as you write styles. When writing CSS, contextual code hints are pulled right from your Photoshop layers, expediting the time it takes to go from comp to code.
This is just a snapshot of what you can do, to view a full tutorial of how to use PSDs in Dreamweaver click here. We’ve also included a sample PSD for you to try out within the Extract panel.
This release is a significant milestone for the preview surface in Dreamweaver. You might be familiar with the Netscape 4 view-of-the-world you get with Design View, and in this release we’ve put Live View front and center so you can preview your website as you build it, with everything rendering in HTML5. Live View is now the default viewing surface, but you can go back to Design View if you need it.
There’s now more editing features for previewing those quick edits as you build your site. This’ll save you all those trips to the browser just to check small changes.
Use Live Guides to directly select elements to rearrange on your site. When you make a selection in Live View, the tag and everything nested with it gets selected; you can drag this around on your page to rearrange, hold while dragging to bring up the Element Quick View for precise DOM insertion, or use as a visual reference in code for bulk selections.
All of your code gets updated for preview in real time as you build your website – no refreshing, and you can save the browser preview for when you need to make a serious review.
Quick Access to CSS
This is a simple addition which will make your life easier when writing CSS. When you select an element in Live View, you can see all the selectors applied to that element. Right click and select “Go to Code”; this will take you to the exact selector in your CSS file, saving you from having to fight with debugging tools to find what style is applied where.
(Hint: you can paste copied styles from a PSD here too!)
The (not so) Little Things
The little things make a big difference in the way you work. There’s more incremental improvements you’ll find in this release:
You can now change the color of your code editor. Choose from a list of themes, customize to make your own and take them with you between machines when synced to Creative Cloud.
Use Cmd/Ctrl + [ / ] keys to easily traverse between parent and child elements. See the selections in Live View or use a way to quickly navigate code.
If you don’t want to start with a blank page, you can choose between five responsive templates ready for you to customize and style.
This is just a sample of what you’ll find. Check out the new features summary to learn more about all the updates, or some of our new tutorials. If you’re working with PSDs and the web, or are still on an older version of Dreamweaver like CS6, this release is for you! Below are a few resources for you to get started.
Thanks for your support!
The Dreamweaver Team
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.
In our next release of Dreamweaver we will take another big step towards modernization by moving to a native 64-bit architecture. The next version of Dreamweaver will only be supported on 64-bit Macs aligning with Apple’s decision to require 64-bit hardware with the release of OS X 10.7 (Lion). Mac and 64-bit Windows users will enjoy newfound responsiveness, stability and performance, as Dreamweaver CC will begin to take full advantage of better memory addressability inherent with modern hardware and operating systems. On Windows, both 32 and 64-bit processors will be supported (Windows 7 and higher).
As a result of this architectural change, the new installation experience will be different than in the past:
- Installing the next version of Dreamweaver CC will replace your installation of the June 2014 release. If you wish to continue using the June 2014 release, you will be able to download and reinstall it separately.
- If you are using third-party extensions, they will need to be reinstalled. We expect a very small number of these extensions to be incompatible with the next version of Dreamweaver CC and require reinstallation. We have been working with extension developers, to help ensure a smooth transition to 64-bit support and expect the transition to go smoothly.
The next version of Dreamweaver CC will take a giant leap into the future, and having a 64-bit computer will ensure you’ll be able to have the best experience possible. Be sure to watch the live stream of Adobe’s MAX keynote to see what else is coming for Dreamweaver.
The Dreamweaver Team
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.
Develop responsive and mobile sites
Take the next step in web design and learn how to create fully responsive site and mobile apps that play well with all screen sizes in this Dreamweaver CC video tutorial.
Use Code View to edit your web designs
Learn how to design web pages using the tools in Dreamweaver CC that are made for writing and managing code in this video tutorial.
Publish and manage your websites
Get up and running! Learn how to publish and manage your websites by following along with this Dreamweaver CC video tutorial.
Enhance typography in your web designs
Make your designs bold. Get the rundown on how to add unique typography to your projects using Edge Web Fonts and Typekit integration in this Dreamweaver CC video tutorial.
Test and preview your work in Dreamweaver
Ensure you’ve got it right. Get acquainted with the different ways you can test and preview your work in this Dreamweaver CC video tutorial.
Edit CSS properties visually
Learn how to leverage the visual CSS Designer Panel in Dreamweaver to control the look of your HTML content in this Dreamweaver CC video tutorial.
Create HTML5-compliant pages
Use the visual tools in Dreamwevaer CC to add HTML content that jives well in a variety of browsers in this video tutorial.
Navigate Dreamweaver’s user interface to work faster
Find your way around Dreamweaver CC. Get to know the different panels, menu options, and editing views you can use to create web pages in this video tutorial.
Looking for more?
You can find a whole lot more Dreamweaver CC learning content on Adobe Learn & Support center. Stay up-to-date on the latest tutorials by following us on Twitter @Dreamweaver or give us a ‘Like’ on Facebook! Happy coding!
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 and we’ll be in touch to bring your story to life.
What’s in it for me?
The stories which we publish will receive public recognition by way of promotion on Adobe social channels, and a special thank you will be sent to you in the mail. Not to mention, it’s likely that this new found attention to your work will result in an uptick in traffic. We’d call this one a win-win. Agree? Then get started by completing this simple form to be part of the story!
We can’t wait to see your innovative work and help give it the attention it deserves with exposure to millions of our fans and followers.
Product Marketing Manager
Today we’re excited to announce the 2014 release of Dreamweaver CC! This latest version will improve your productivity and streamline your web design process, making it quicker for you to build and edit your web and mobile projects.
Can’t wait to get your hands on it? Download Dreamweaver CC now.
Here’s what you’ll find in this release:
New Live View editing
This update adds new editing features within Live View, which was upgraded to use a brand new rendering engine last August. You can now visually edit your page and preview changes without switching between display modes and constantly refreshing.
Need to change an image? Click on it and swap it out. Need to edit text? Change it without having to scrub through your markup. With Element Display, you have quick access to CSS selectors, tag information, image editing properties and text editing and formatting, so you don’t have to spend a lot of time with development tools to decipher how and where CSS properties are applied. Now, you can click on HTML elements inside of Live View and immediately see the element tag, applied CSS selectors, so you can quickly add or delete selectors found in your stylesheets. You now also have access to the CSS Designer, Insert Panel, Properties Inspector and other panels to quickly build and edit your page within Live View. Learn more about how to use Live View features here.
Element Quick View
Navigating HTML markup can be tedious since all your tags get lost between the content that fills your page. With the Element Quick View you get access to a display list of all the elements within your DOM (kind of like an elements panel for HTML) without having to sift through the noise of additional markup. Inside of this view you can view applied CSS selectors and rearrange, duplicate or delete elements. Your selection is also highlighted in both Code and Live views to see where the element lives on your page. Learn more about how to use the Element Quick View here.
Copy > paste > edit is an old and cumbersome method of writing CSS that’s error prone. Now in the CSS Designer you can right click on a selector to copy all of the applied styles and paste them onto a new selector. You can filter what you copy by layout, text, border, background or animation styles and even navigate to live websites within Dreamweaver and grab styles from there. It’s the little things that add up.
There’s more you’ll find in this release, including new video tutorials to help you get started, site management certificate support and other improvements and bug fixes. See a full list of what’s new here.
Grab the latest version Dreamweaver CC and see for yourself how these features work and can improve your productivity. This release was made possible by feedback from users like you – you can now provide your feedback directly within Dreamweaver CC(Help>Submit Bug/Feature Request) or through our community forums. Thank you for your continued support and help.