Leverage Creative Cloud Files For Your Dreamweaver Code

Creatives create files, and files take up space. Luckily, Adobe Creative Cloud subscribers are covered. With Creative Cloud Files, subscribers have access to 20 GB of file storage that can be used for backups, link sharing, folder collaboration, and more.

In this post, I will show how you can upload your code to Creative Cloud Files and sync to it from anywhere – work or home – with ease.

Get started:

  1. Locate the ‘Creative Cloud Files’ folder on your computer.Creative Cloud File
  2. Create a folder inside the ‘Creative Cloud Files’ folder. Let’s call this new folder ‘SampleProject’.
  3. Copy all source code (HTML, CSS, PHP, JS, etc.) to the ‘SampleProject’ folder.
  4. Create a new Site in Dreamweaver with Local Site Folder path set to ‘SampleProject’ folder.New Site Dialog
  5. Your project files and subsequent changes will now automatically be synced in your Adobe Creative Cloud Files.

Your Questions Answered: How do I create a horizontal, center-aligned CSS menu in Dreamweaver?

We have received a number of requests from Dreamweaver users about creating menus, and we’re here to help! In this ‘Your Questions Answered’ post we’re tackling the basics of creating a menu in Dreamweaver. We’ll get more advanced in later posts, exploring how to create drop down menus and responsive menus, but for now let’s get started with a solid foundation to build off of.

If you are new to Dreamweaver, see our previous ‘Your Questions Answered’ post which walks you through setting up a site in Dreamweaver. Once you have a site set-up, you’re ready to rock this tutorial.

Let’s get coding!

Using The CSS :target Selector To Create JavaScript-less UI Effects

Instead of linking to new pages, sometimes links (<a> elements) reference sections, fragments or other elements of the same page. These kind of links are prevalent in one-page website navigation.

The CSS :target pseudo-class selector is used to select and style the target of an internal link in a document, the fragment of the page referenced in a link’s href attribute.

For example, if you have an anchor tag linking to a "further reading" section of an article…

<a href="#further-reading" title="Further reading resources" />

<!– … –>

<section id="further-resources" >

<!— … —>

</section>

…you can use the :target selector to highlight this section when the link is clicked to guide the reader’s eye to it. This highlighting technique is known as the yellow fade technique and was first introduced by 37 Signals.

#further-resources:target {

animation: highlight .8s ease-out;

}

@keyframes highlight {

0% { background-color: #FFFF66; }

100% { background-color: #FFFFFF; }

}

Your Questions Answered: How do I center align a web page in Dreamweaver?

We regularly get asked questions on our forum, on Twitter and on Facebook about how to do different things in Dreamweaver CC, and we’re happy to help! We want to make sure you have the know-how to make your ideas a reality using our tools, so this is the first post in a series we’ll be publishing where we’ll answer your how-to questions. Have a burning question you’d like answered? You can always go through the channels mentioned above, or feel free to leave a comment below.

Today, we’ll be talking about how to create a web page in Dreamweaver and center-align its contents. If you are looking for the code to center your page, dive directly to the section ‘Center the Content.’ However, if you are new to web design and are getting started with Dreamweaver, it’s wise to go through every step of this tutorial.

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

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.

Code View Gets a Makeover in Dreamweaver

NOTE: This post was updated on February 12, 2015 to included the latest Code View color theme additions.

One of the features in Dreamweaver CC is 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.

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.

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