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
Salte Color Theme

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.
  2. Preferences Panel

     

  3. Select Slate from the Theme drop-down menu.
  4. Select the Edit Theme Colors button.
  5. Select Date Object from the Styles for list menu, select the Background color box, then select a new color of your choice.
    Color Theme
  6. 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.

Comments (0)

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


Comments (0)

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

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.

New feature summary
Download now

What you’ll find in this release:

PSD Support with Extract

code

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.

Live View

lv

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.

Live Guides

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.

Live Refresh

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:

Code theming

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.

Keyboard Shortcuts

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.

Starter Templates

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.

Download now
New features summary
Tutorials
Community forums

Thanks for your support!
The Dreamweaver Team

Comments (0)

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.

Thanks,
The Dreamweaver Team

Comments (0)

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

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.

2_responsive

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.

3_codeview

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.

4_publish

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.

5_fonts

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.

6_preview

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.

7_CSS

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.

8_HTML5

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.

9_interface

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!

Comments (0)
Jul
14

Be Part of the Story!

By · Comments (0)

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 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.

Best,

Tareq Aljaber

Product Marketing Manager

Comments (0)

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 CSS

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.

Dreamweaver CC Video In-App Gallery

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.

 

Comments (0)

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.

Using Adobe Creative Cloud, the full-service agency developed a fully responsive website, print materials, and a television ad that ran during the Super Bowl for the Water From Rain campaign. To communicate about reducing pollution in stormflows, Hue relied on the integrated, streamlined workflows in Adobe Creative Cloud.

 Built with Adobe Dreamweaver CC, the website is fully responsive and displays smoothly on tablets and mobile devices. “I like to approach websites from a design perspective, rather than focusing just on technical specs,” says Peter Hoffman, web director at Hue. “Adobe Dreamweaver CC enables me to feel extremely confident in how my designs are implemented.”

Water From Rain responsive website

Water From Rain campaign

 To successfully translate his designs to multiple devices, Hoffman relied on Adobe Edge Inspect CC. By checking the website flow on different screens, he was able to make sure everyone viewing the site would have the same experience, regardless of device.

 Through his Creative Cloud membership, Hoffman also gained access to Adobe Photoshop CC and Adobe Edge Reflow CC and enjoyed experimenting with the integration between the two apps. “Taking static ideas to the web can be challenging, but the integration between Adobe Photoshop CC and Adobe Edge Reflow CC made it easy to generate responsive web assets,” says Hoffman.

Since the television commercial ran during the Super Bowl, visits to the campaign’s website have averaged 3 minutes, 42 seconds, with a bounce rate of only 1.8%.  http://adobe.ly/1ilFdfC

Comments (0)

Now you can connect OneNote to over 80 other services like Email, Twitter, Craigslist, and your phone.

Introducing the OneNote Channel on IFTTT.

IFTTT is a service that lets you create powerful connections with one simple statement — if this then that.

IFTTT Recipe: Send your favorite tweets to OneNote connects twitter to onenoteIFTTT Recipe: Follow new Craigslist postings from OneNote  connects craigslist to onenote

IFTTT Recipe: Create pages in OneNote from a text message connects sms to onenoteIFTTT Recipe: Send articles from the NYT to OneNote connects the-new-york-times to onenote

Sync content across apps, archive data that’s important to you, and control the notifications you want to follow. Learn more about IFTTT and unlock new value in the products you use every day.

 

Get OneNote OneNote | Follow OneNote facebook twitter

Comments (0)

Recently Livescribe released a new version of their Livescribe+ app to send notes easily to OneNote. Now you can use pen and paper to take notes, and access that information on any device with OneNote.

The Livescribe 3 is a smartpen that connects to an iPhone or iPad to transfer handwritten notes to your mobile device. You can go into a lecture or meeting with your smartpen and a Livescribe notebook, store every note, drawing or idea, and capture everything that you might need in the future.

Writing with pen on paper is a very quick and natural way to capture information, something people have been doing for centuries. For OneNote fans, this new collaboration with Livescribe makes that information more valuable and more useful by integrating it into OneNote notebooks.

Lightscribe_01

If you have a Livescribe 3 smartpen, you can get started by tapping on the Share icon inside Livescribe+. You’ll see a Send dialog with the OneNote icon – tap on that to log into OneNote with your Microsoft account. The default behavior under Send Options is to upload each page you select in Livescribe+ as an individual PNG file which will get imported directly into your OneNote notebook. You can also change it so all the pages you select will be uploaded as a PDF attachment.

Lightscribe_02

Hope you enjoy this new way to write your notes down, and store and organize them in OneNote. For more How To info and to purchase a Livescribe smartpen, please visit www.livescribe.com/blog/noteworthy

 

Get OneNote OneNote | Follow OneNote facebook twitter

Comments (0)

Database Design and Management

Cwebpro can design and develop a small business data management solution for you. We will provide professionally crafted entry screens and a database that will grow with your business.

Professional Web Designs

If you need a web site designed or updated contact Matthew at Cwebpro for quality work at a fair price. The Web Creation Zone (Cwebpro) can meet all of your business website design and data management needs.