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.

From stormflows to workflows

Without proper care, storm sewer systems can carry hazardous materials into public water supplies. That’s why the Broome-Tioga Stormwater Coalition hired Hue to design a multimedia campaign to educate residents in the Southern Tier of New York state about clean water habits.

Let us know what you think about Sync!

Hi there,

If you’re using Dreamweaver CC, perhaps you’ve also been using Sync Settings to keep your site settings, keyboard shortcuts,and other preferences in check across your machines (ooh and across OSs too- boom!).

We’re obviously pretty excited about it – but we want to hear from you – have you been using Sync? If so, how’s it working out and what (if any) issues have you encountered?

Please click here to take a brief survey to share your thoughts on Sync Settings.

Thanks a ton! Cheers.

– Dreamweaver team