Adobe Creative Cloud

December 9, 2015 /Milestones /

18 Dreamweaver Tips in Celebration of 18 Years

WOW, Dreamweaver is 18! Our baby is all grown up. From a precocious start that took the web-building world by storm, Dreamweaver has flourished by continually innovating to keep apace with modern trends in design and code. To celebrate, I’ve compiled 18 tips that highlight Dreamweaver’s power and finesse.  While this collection includes a few oldies-but-greaties (better than just goodies), most are culled from recent Dreamweaver innovations which you may have overlooked. Let’s party!

1. Putting your best font face forward

There are numerous benefits to being a card-carrying member of the Creative Cloud but getting a slew of quality web fonts for free has got to be one of the best. The availability of web fonts—after the long, dry period of just PC and Mac common fonts—is a major boon to web designers. The selection has really blossomed and you, as a Dreamweaver CC user, have direct access to hundreds of beautiful options, all at no additional charge. To access the Adobe Edge Web Fonts, begin to assign a font-family property to any selector in the CSS Designer panel. From the list of available entries, choose Manage Fonts.

pic11

On the first tab, you’ll see a sample of typefaces to choose from—and there are way, way, many to choose from. Narrow your choices by selecting one of the top two buttons on the right to look for recommendations for either headings or paragraphs. You can further filter the fonts with any of the 8 categories, including sans, script, monospace, handmade and decorative. Pick your font and go to town with your design. Did I mention these were free?

2. Extract ‘n’ Drop Images

Many of Dreamweaver’s users, myself included, wear multiple hats—designer, developer, marketer, copywriter, and so on. Naturally, we often take advantage of Dreamweaver’s increasingly tight integration with Photoshop to pull it off in style. The Extract feature tightens up design-time by exposing images, text, and CSS styles embedded in a PSD file right in Dreamweaver. In the latest release of Dreamweaver CC, the extraction process became even more intuitive. Now you can simply drag an image from the current PSD in the Extract panel into Live view and drop it wherever it’s needed. Hover over the (</>) icon to open Element Quick View for the most precise positioning.

pic1

To see a visual of how Extract now works, check out my Lynda course on Dreamweaver CC 2015 Updates. Should you not have a Lynda.com account, here’s 10 days free on me to get the party going.

3. Max it with Emmet

If you’re a coder, even a dipping-your-toe-into-the-code-pool type, you gotta love Emmet, the abbreviation expander now available in Dreamweaver CC. I’m really fond of using Emmet to quickly spin up multiple Lorem Ipsum content. (Just type p*5>lorem  and press Tab to get 5 different paragraphs of placeholder text.) Recently, I discovered a new fave: quick anchor tags. Try this in Code view:

But wait, there’s a{more}

And while it may look like Italian love, press that fabulous Tab key to reveal the truth:

But wait, there’s <a href=””>more</a>

Simply place your link text within a pair of curly braces, preceded by an “a” and that anchor tag pretty much writes itself—with the help of Dreamweaver’s Emmet. Want to dig deeper into Emmet? X marks the spot.

4. Duping with the CSS Designer

The CSS Designer is a sweet way to visually create and modify your styles—but did you know it had some hidden productivity tools as well? Right-click on any selector to display a selection of copy and duplication operations tailored for the wide range of CSS options. With these options, you can copy all the styles from one selector and paste into another or, as is more likely, just grab the relevant ones whether they are text, border, background, or animation related.

pic2

If you need to copy the entire selector, I recommend either the standard Duplicate command (which will place it in the selected CSS source) or Duplicate into media query, for a more targeted approach. Both shortcuts will save you tons of time while maintaining your stylish demeanor.

5. Free up your code!

Code and Split view are definitely on my frequently-visited list in the land of Dreamweaver, but every now and then I crave a little more freedom. Sure I can use the View menu to move my code view to the left, right, vertical or horizontal, but I have found it useful to break out a floating window o’ code as well. If you’ve ever felt that need, just choose Window > Code Inspector to get a free-range option. And what’s more, because it’s a standard panel, you can dock it wherever you like, whether that’s at the bottom of the document window paired with the Property Inspector or along the side.

pic3

6. Elemental mods in Live view

With every release, Dreamweaver’s Live view improves in functionality and ease of use. While some of the enhancements are designed to reproduce features found in Design view, Live view has a few cool new tricks of its own. I literally—okay, figuratively–stumbled across this one the other day. Select any page element in Live view. (By the way, did you know you can use the Up and Down arrows to navigate through the DOM tree in Live view? Bonus tip!) Now move your mouse over the tag name in the Element Display (that’s the proper name for the blue tab in the upper left of your selection). Notice how the cursor changes to a hand? You can now drag your selected page element—and all of it’s children—anywhere on the page and drop it where needed. And, if you need to quickly reference the underlying code, you’ll find that tag selected in Code view.

7. Going steady with the jQuery UI Datepicker

All of the jQuery UI widgets have been fully integrated into Dreamweaver and that includes a custom Property Inspector for each and every one. The Datepicker—extremely useful just in its default state that displays a text field with a pop-up calendar—is especially option-rich. Not only can you select from a full slate of date formats and locales, but you can also allow enhanced user interaction affecting the month and year controls, set the minimum and maximum dates, or skip the text field altogether. You can even display multiple months simultaneously with a quick change of the Number of Months value. Oh, and did I mention that, because it’s a jQuery UI component, it’s completely theme-able via jQuery UI ThemeRoller? Wowza.

date

8. Stepping up navigation with Bootstrap

Navigation is often targeted in a responsive site as one page component that must adapt to meet the needs of smaller screens—and Bootstrap has hit the bull’s-eye in this regard. With Bootstrap, you can quickly set up your nav bar to morph from a horizontal strip to a vertical panel. Dreamweaver fully supports all of Bootstrap’s navigation flexibility in an easy-to-use package.

For a quick, usable demo of what’s possible, look no further than Dreamweaver’s New Document dialog. Simply opt for the Bootstrap framework and click the Include a pre-built layout option checkbox and there’s your fully featured navigation example that includes:

  • Standard, semantically correct, unordered list of links.
  • A brand image area, perfect for logo placement.
  • Search field and submit button, ready to be activated.
  • Drop-down menus for sub-navigation items, complete with dividers.
  • Sections that can be aligned to the left or right, as needed.
  • Built-in responsiveness.

pic4

If that wasn’t enough, Dreamweaver makes customizing the navbar a snap. Prefer a dark palette? Add a .navbar-inverse class to your <nav> tag. Want to always show the navigation above the page, bring in  .navbar-fixed-top. Prefer your nav below? Make it .navbar-fixed-bottom. All of these standard Bootstrap classes are supported with Dreamweaver’s code-hinting, so you can just start typing .navbar in the Element Display and select from the desired option from the pop-up list. So simple, so cool.

9. Spotlight that code!

Want to dance crazily on the bleeding edge? Open Dreamweaver Preferences and switch to the Technology Previews section. Now click Enable Code highlighting and let the wild rumpus begin! Seriously, this is a sweet little option in the latest Dreamweaver version that you can help you traverse often dense code.

pic5

Once turned on, double-clicking any tag highlights all instances of that tag (including the opening and closing varieties) on the current page. It’s a great tool for quickly identifying—and going to—similar elements. Use the keyboard shortcuts (F3 on the PC, Cmd-G on the Mac) to leap from one highlighted element to the next; add a Shift modifier to go backwards to the previous selection. Best of all, Code highlighting works with attributes and values as well as HTML tags so you use it to spot specific classes.

10. You’ve been well served

If you work with dynamic websites that use PHP or another server-side processor, you’re no doubt familiar with Dreamweaver’s server configurations. And, if you’ve been doing it for a while with a remote testing server, you’re equally doubtlessly tired of manually having to push modified files to the server before you can review any changes. Well, rest easy. Dreamweaver CC now has the ability to automatically put files when saved. To enable this time-saving, frustration-reducing feature, open the Site Setup dialog and visit your testing server configuration. Switch to the Advanced tab and check the Always auto save dependent files option. The wording here is pertinent: not only will your source file be pushed to the proper server, but any dependent files which have also been modified since the last put as well.

11. Inspector Device on the case

In the age of multiple screen size, Device Preview is one very sweet Dreamweaver feature. With it, you can quickly get real-time feedback of any design or content changes on any connected device, whether phone, tablet or monster-sized Jumbotron. Honing in on specific page elements is critical for debugging CSS rules and a single-click of Dreamweaver’s Inspect icon highlights any selection on all your previewed devices simultaneously. Quite often, however, you’re fine-tuning one particular device. For this scenario, click the Inspect icon adjacent to the device name in the Device Preview pop-up to focus on just that screen. Check out my recent article for more about working with this hyper-cool Dreamweaver ability.

dp-6

12. Lint-free code

No matter how powerful Dreamweaver’s visual toolbox, the more websites you build, the more likely you are to work code-side. While this greatly expands your design possibilities, it also opens the door for errors. Now you can keep that door nailed shut with Dreamweaver CC linting support. Linting—basically, programmatic syntax checking—is available for HTML, CSS and JavaScript. When Dreamweaver identifies a problem it sends up a number of flares, both general and specific.

Open a well-coded page in Dreamweaver and you should see a small green checkmark in a circle on the right side of the status bar. This icon indicates that all is well with your code. If the linting mechanism detects a missing </div> or other problem, the icon changes to an encircled red x.

pic6

Click on the icon to show the Output window with details of the issue: line and column number as well as error description. Clicking on any entry takes you right to the offending line for your correction pleasure. No more lint on this puppy!

13. Visualizing your media queries

Perhaps one of the most impactful enhancements to Dreamweaver in recent releases is the inclusion of the Visual Media Queries bar. Not only does this new aid give you a very clear, color-coded overview of your defined CSS breakpoints, it also helps you navigate to them quickly and efficiently. Click once on any media query bar to snap the document window to the defined minimum or maximum width. If both parameters are part of the media query, click again to toggle between the two.

vmq

Need to add another media query? Just drag the document window scrubber to the desired location and click the Add triangle below the Visual Media Query bar. You’ll be able to specify your min-width, max-width or both values to build your rule without coding.

14. Snippier Snippets

If you code a lot, you’re probably well-versed with Dreamweaver snippets—and if you’re just starting to code, you should be. Recently overhauled (with new additions for Bootstrap, responsive sites, animation and more) these core bits of code can save you a ton of time. Snippets can also be synced via the Creative Cloud so you can make sure they are available no matter which system you’re working on.

pic7

Want to make them even handier? Assign a keyboard shortcut to your most commonly used ones. Open the Keyboard Shortcuts dialog (under Dreamweaver CC  on the Mac and Edit on Windows) and—if you haven’t already—duplicate the standard set of shortcuts to make an editable version. Then, expand the Snippets category under Commands and drill down to select your fave. You’ll notice that all your snippets are listed, even those create by you just a second ago. The only challenge is to identify an unused keyboard combination; I find that using the modifier Ctrl-Shift-Alt on Windows or Cmd-Shift-Option on Mac with the key of your choice often does the trick.

15. Thumbnails worth a thousand filenames

I try my hardest to always give the images I use in my web pages relevant names. After all, who can possibly remember what IMG_20151002_140741457.jpg is? But now, I can chill a bit as Dreamweaver displays a pop-up thumbnail (complete with width and height) for an <img> src attribute or CSS background-image URL value. No preferences to set or switches to throw, it just works and is a significant benefit.

pic8

As an extra bonus, Dreamweaver will preview color values as well, whether in hexadecimal, rgb() or rgba() format.  And, for an extra hoot, roll your mouse over any color name—whether in a CSS rule or not—to get a clear memory jog of just what shade of green chartreuse actually is. Hint: bright.

16. Linking up Dreamweaver with WordPress

As I noted in various venues (like this post, that one, and this course), Dreamweaver and WordPress make a great team. With Dreamweaver’s dynamic file toolset—including dynamically related files, custom filter, and site-specific code hinting—you can craft and modify WordPress pages in a visual authoring environment. One thing that’s not obvious is how you work with other site pages within Dreamweaver. The key is to start with the index.php file found at the WordPress site root (not the index.php file in the theme folder), and navigate from there. Use Dreamweaver’s ability to click a link, if available. If not, you can enter the path directly into the web address field atop the document window. Once the page is displayed, all the CSS and other tools in Dreamweaver are at your disposal.

17. Clearing the Viewport

If you’ve been designing sites for a while, no doubt you’ve got a number of clients with older, non-responsive sites due for an upgrade. To make sure your pages are represented at their best, it’s important each contain a <meta> viewport tag to set the width to that of the device, initially scaled properly:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

You can add this code by hand, of course. But Dreamweaver takes all the fuss away with the Viewport object in the Insert panel’s HTML category. Just click on Viewport object and the following code is inserted just above the closing </head> tag. Sweetest of all, it doesn’t matter one iota where your cursor is in Live view or what, if anything is selected. Thanks, Dreamweaver!

18. Livin’ large with the Quick Tag Editor in Live view

When the Quick Tag Editor (aka QTE) was introduced to work with Dreamweaver’s Design view, it quickly ranked in my top 5 favorite utilities within the program. So, to find that it didn’t work initially in Live view was a major disappointment to say the least—only offset by the joy of seeing my QTE bestie restored to its full glory in the most recent version of Dreamweaver CC. Hooray, it works with Live view now! With this handiest of features, you can quickly modify an existing tag, wrap (!) the selection, or insert all new HTML. Just make your selection and press Ctrl-T/Cmd-T once, twice or thrice to rotate through the 3 different modes. The Quick Tag Editor also works when editing content in Live view—awesome for adding that all-important <span> tag.

space

19. (One to grow on!) – Rounding up your images

Raise your hand if you’re tired of the same old rectangular images. Whoa, that’s a lot of designers! One technique for taking the boring out of head shots and other common photos is to give them a different frame, like an oval or rounded border. No need to reach for that masking tool in Photoshop, you can encircle or otherwise decorously highlight any image right in Dreamweaver—and make ’em responsive—all at once. A number of the coolest design options can be found in the Insert panel, under the Bootstrap Components heading. Just choose any of the Response Image options, other than Default, such as Circular, Rounded Corner or Thumbnail to add your sweetly crafted graphic to the page. Each option injects a special class, like img-circle, into the <img> tag, to accompany the .img-responsive class. And, once the class is applied, you can, naturally, modify the CSS however your heart desires.

pic10

Dreamweaver’s implementation of Bootstrap is chockful of zippy media possibilities.

Happy Birthday, Dreamweaver!

Dreamweaver blazed out of the gate 18 years ago to power a generation of web designers. Each new version brings more power and flexibility, coupled with ease of use. So, blow out those candles, Dreamweaver, and get back to work! We can’t wait to see what’s in store for your 19th (and 20th and 21st…)!

Milestones

Join the discussion

  • By Peter Tilbrook - 10:20 PM on December 9, 2015  

    Lint-free code – does not appear to work for .cfm templates ???

    • By Joseph Lowery - 1:03 AM on December 10, 2015  

      As I mentioned, currently only HTML, CSS and JavaScript are supported.