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

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!

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.

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

The 2014 Release Of Dreamweaver CC Brings New Live View Features And Big Productivity Improvements

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.

 

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.

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

Amazing interior design and architecture resource

Have you ever wondered where interior designers go for inspiration and ideas? More than 70,000 of them rely on the Trade Only Design Library (TODL), a site that connects them with sellers of goods for residential and commercial interior design projects. For manufacturers, TODL is also a great resource, generating 4,000 targeted leads monthly.

To keep both buyers and sellers engaged and make the site easier to navigate, TODL recently redesigned the site using Adobe Dreamweaver CC. Executive Creative Director Scotty Smith appreciated how Live View and Code View in Dreamweaver CC saved him time and helped him improve the site’s code. The responsive website is now easily accessible by designers in the office on a desktop computer or at a job site using a tablet or a smartphone.

TODL benefitted from working with tools in Adobe Creative Cloud and looks forward to taking advantage of even more time-saving features and services. “Adobe Creative Cloud has already saved us time by enabling us to easily share files, send links to files that can be viewed using standard web browsers, and integrate a wealth of creative new features into our designs,” says Smith.

Read the full story: http://adobe.ly/1eC7rUU

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

How To Set Up WordPress in Dreamweaver

In this tutorial learn how to set up a WordPress site locally for editing in Dreamweaver. Learn how to install a local server (MAMP) set up a database, import your own content and then set up Dreamweaver to test the WordPress site locally.

Links you’ll need:
http://www.wordpress.org
http://www.mamp.info

Example site:
http://tranifamilytree.com

Tip: In Dreamweaver, turn off Display External Files for faster performance.

Additional tutorials will dive more into theming and customizing a WordPress site in Dreamweaver.

Live Today: Dreamweaver CCM Update #2

We’re happy to announce an update to Adobe Dreamweaver CC. This update focuses on stability enhancements and bug fixes. In addition, it includes improvements to code-view performance and some user experience enhancements. Download Dreamweaver CC here.

We encourage you to download the latest release of Dreamweaver CC and provide your feedback and comments. We’ve also just launched a customer feedback survey. The survey should take no more than a few minutes to complete. Click here to take the survey to provide your comments. Follow us on Twitter (@dreamweaver) and Like us on (https://www.facebook.com/AdobeDreamweaver) to stay up-to-date on forthcoming releases and new features.

Responsive Web Design With Heart

MIGHTYminnow’s pro-bono client Rocket Dog Rescue is in a better position than ever to connect pet lovers with animals needing homes. After first designing the non-profit’s website in 2006, MIGHTYminnow founder Kristin Long and her associate Mickey Kay used Adobe Creative Cloud, including Adobe Dreamweaver CC to turn the organization’s existing WordPress site into a dynamic, fully responsive website.   Many features in Dreamweaver CC, including Code View and Live View, the visual editing capabilities of CSS Designer, and the Viewport selector to work collaboratively, save time, and make the overall process of responsive development more efficient and adaptable. To test how the new site performed on different devices, Long used Adobe Edge Inspect CC to navigate the site design in Chrome on her desktop and see the work appear on a range of connected phones and tablets in the studio’s device lab as the devices follow along loading every page she loads in Chrome. Screen Shot 2013-12-12 at 9.01.01 AM The Rocket Dog Rescue website now successfully supports the organization’s goals of providing comprehensive information for people looking to adopt a pet or just looking to get more information on the organization from any device. For MIGHTYminnow, the site is an example of the efficacy of working with the tools in Creative Cloud to cost-effectively tackle responsive web design. “With responsive design adding complexities and potential costs to the development process, tools in Adobe Creative Cloud support us in utilizing new technologies in an affordable way and empower us to implement new ideas with great efficiency,” says Long.

Read more about the Rocket Dog Rescue project here.

 

Adobe Dreamweaver Survey 2013

The Dreamweaver team is conducting a customer feedback survey. The objective of this survey is to connect with you, our users, and figure out from as many of you as possible what’s working in Dreamweaver and what isn’t. 

Your feedback is important to us. Participation in this survey is voluntary and your responses are completely anonymous. 

The survey should take no more than a few minutes to complete. Once you have completed all survey questions, please remember to click the “Submit” button to send your response. 

  • To begin, click on the link below.
  • After completing each page, the page will scroll down to the next question.
  • Scroll up or down If you need to change an answer.

We know your time is valuable, and we appreciate your participation. Thank you very much for helping to improve Adobe Dreamweaver.

 

To take the survey, click below: 

http://bit.ly/18bhS2n

Best,

Tareq Aljaber

Product Marketing Manager