Dreamweaver Shortcuts and Examples

Dreamweaver Snippets

Out of the box, Adobe (formerly Macromedia) Dreamweaver is set up pretty well as a web design tool. If you’re looking for freelance design jobs, it’s essential. Some argue that the interface leaves something to be desired, but hey, it works. One of the great features that Dreamweaver does have is its “snippets” feature. This allows you to build up a local library of all of your most-used code. This allows you to begin your projects using a similar framework, and it shortens the time between buildout and your first version of a page or site.

In the Window menu, choose Snippets. A panel should open up alongside the “Files” and “Assets” panels in the bottom right (assuming they’re open). You’ll see a number of snippets already in there, providing you with comments for the common languages, form elements, JavaScript bits, and others.

Of course, this becomes most useful when you add your own snippets to it. So go ahead and click the “New Snippet” icon in the bottom right. Typically of Adobe, it’s a tiny little unlabeled button, but it does have a tooltip, so hover over it if you want to be sure.

You’re now presented with a dialog box asking you to name and describe the snippet, and of course, enter the text for the snippet itself. This is where things are a bit ambiguous. First, make sure the name you pick is a legal filename (no slashes, colons, etc.), that it has no special characters (e.g. accented bits), or double quotes (no idea, but that’s what Adobe says…).

Choose

Now, you need to choose how your snippet will function. The default behavior is to “Wrap Selection.” This means whatever you’ve got selected in Dreamweaver’s code editor, when you activate your snippet, the “Insert Before” bit will appear before your selection, and the “Insert After” bit will appear after. Ambiguity, begone! This can be some really powerful stuff. Now, if you set it to “Insert block,” then it will just offer you a single text area, and it’ll just appear wherever you have the insertion point. It would also replace anything you have selected, so make sure you chose your snippet’s behavior wisely!

The “Preview type” radio buttons control whether you’ll see the code itself in the Snippets panel, or if the code will be rendered and displayed WYSIWYG style.

All in all, if you’ve decided Dreamweaver is your IDE of choice for HTML web design, or if you’re pursuing freelance design jobs on the web, this may prove to be a powerful addition to your web design repertoire.

Code Formatting on the Fly with Dreamweaver

This may be one of the shorter Dreamweaver tips you’ll encounter, but if you’re working freelance design jobs or interface design jobs, it’s indispensable.

Let’s say you’ve got some teammates, and one of them writes code completely differently than you do. For example, maybe they use two space tabs instead of real tabs, or they write things on one line that you write on multiple lines, etc. Dreamweaver has you covered with its source formatting system.

First, open up the Coding toolbar (Edit > Toolbars > Coding), then select “Code Format Settings” to set up your preferred formatting. After you’ve got that set exactly how you want it for your various code languages, you can apply it to any open file by selecting “Apply Source Formatting” from the “Format Source Code” icon.

This is a great way to straighten out some minified code as well, which is becoming more and more common as a way to reduce bandwidth needs.

Freezing the Live View

Here’s a quick web design tip that might come in handy on your interface design jobs, especially for AJAX-y sites.

Dreamweaver’s “Live View” is basically a rendered version of your page that you can edit, which is the WYSIWYG part of Dreamweaver. But what if you’re working on an element that’s triggered by JavaScript, and the page isn’t initially in the state you want it? Turn on “Live View,” get the page looking how you want it, then, from the little menu button (part of the “Live View” button in the toolbar), choose “Freeze Javascript” (or hit F6 on your keyboard). Voila! Your page will now “stick” as-is until you unfreeze JavaScript, and your current and future Dreamweaver jobs should go just a tad more smoothly.

JavaScript in the Way? Make It Less Noticeable

Here’s a quick tidbit to add to your arsenal of Dreamweaver tips. Let’s say you’re working a freelance design job and you’ve got a site that’s a little creaky. It’s using some old-school inline JavaScript, like this: </srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code> or something similar. While that works great, man, is it ever ugly, and certainly unwieldy.

Dreamweaver has a great function now, as part of the Spry AJAX framework, to “Externalize JavaScript.” You can find that exact command in the “Commands” menu, and running it will process your document, move all of your inline scripts to external documents (and link to them in the </srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>), and rewrite your HTML to strip away those nasty inline event handlers, supplying each particular event with unique IDs.

All of this will really clean up your HTML, further creating a separation between markup and scripting, which is definitely healthy for your pages.

Using the Code Navigator

This might be one of the coolest functionalities that Dreamweaver CS4 brought to the table, so make sure to add it to your collection of web design tips. (Sorry, pre-CS4 users. This one’s just too useful.)

In most cases, it’s easier to edit the code itself, rather than edit in Design View (things just tend to get too messy). So what can you use Design View for? Use it to select code, then edit in Code View; this is where the split pane is handy. But what about CSS styles?

If you click on an element in Design View and wait a moment, a small
icon of a ship’s wheel (think Netscape Navigator) will appear next to your mouse pointer. Clicking on that will open a pop-out of CSS that applies (and shows which files they’re coming from). Very handy. Clicking on one of those selectors will open the CSS file in question and take you right to the rule that you’re so eager to tweak.

Obviously, waiting for that little wheel to appear every time is ridiculous, so you can skip a step by command-option-clicking (or alt-clicking, if you’re using Windows) the element in question. And the best part? This works in Live View, Code View, or even on the tag selector.

Using Visual Aids

Continuing on our quest of unearthing the best Dreamweaver tips out there, here’s another useful one that will hopefully come in handy on some freelance design jobs. CSS is amazing in its ability to completely transform a page from dull to amazing. But keeping all of your divs, spans, and other block elements straight can become quite confusing. Enter Dreamweaver’s Visual Aids.

From the “View” menu, mouse downward to “Visual Aids.” A submenu appears with a variety of selections, including:

CSS Layout Backgrounds:

Each block-level element of your document is given a differently colored background to set it off from the rest. This makes figuring out what’s nested within what and the relationship between floats, margins, padding, etc. much simpler.

CSS Layout Box Mode:

This will illustrate the box model, showing you margins, borders, and padding and revealing other box-model mysteries.

CSS Layout Outlines:

A simple visual aid, this one merely adds dotted borders to each CSS layout element. So, each of your divs, spans, etc. receives a border.

AP Element Outlines:

This refers to Absolutely Positioned Elements (AP Elements for short in Dreamweaver), which, as you may know, have their own rules when it comes to layout and positioning.

Table Widths:

Above each table element, a line appears with a small downwards arrow, giving you access to some menu options. If a width is specified in the table HTML code, it also displays that number for easy reference.

Table Borders:

This one, quite simply, adds a dashed line border to all tables, in contrast to the “CSS Layout Outlines” dotted-line border.

Frame Borders:

Useful only when editing a frameset, it overlays borders for each frame.

Image Maps:

This is useful only when dealing with an image map, which happens less and less these days.

Invisible Elements:

This is very handy for discovering pesky items that aren’t normally visible, like non-breaking spaces ( ), thin spaces ( ), and other elusive elements.

Turning all of these on at once may be counter-productive, but they’re extremely useful web design tools when selectively enabled and disabled to give you greater visual insight into your document (especially when you’re troubleshooting!).

Taking Advantage of Workspaces

So you’ve launched your web designer career and have Dreamweaver molded to fit your web design workflow—and you want it to stay that way. Thankfully, Adobe’s got your back with Dreamweaver’s “Workspaces.” Visible in the top-most toolbar next to the search field is a menu that states the current Workspace (“Designer,” by default). Clicking it will show you the presets (“Designer,” “Coder,” etc.) that Dreamweaver comes with, but you’ve moved everything around already, opened and closed panels, and otherwise hacked Dreamweaver to be the tool you want it to be.

So let’s make sure it stays that way by creating a new Workspace. Click that menu, choose “New Workspace,” name it, and there you are. Beyond just how you have your panels and toolbars arranged, many other workflow elements will be saved into your new custom workspace.

Look how efficient you are now, you panel-moving, toolbar-customizing fiend! Make sure to highlight your organizational skills next time you talk to someone who’s looking to hire a freelancer.

Editing Dynamic Code

So you’ve been doing some freelance design jobs and writing some great web pages, and you’ve decided to step up to dynamic sites, using PHP, Perl, or some other server-side scripting language. But you don’t want
to have to upload, preview, then return to Dreamweaver every time you change some code. Thankfully, Live View allows for dynamic pages as well as static ones.

From the “View” menu, choose “Live View Options” and enter any GET or POST parameters necessary for your scripted page(s) to display correctly. Beyond that, you can even specify a “Testing Server” in your Site Definition. This can, of course, be a local instance of your software (e.g. PHP/MySQL), or you can utilize (S)FTP or WebDAV to see your dynamic page rendered. The only real tricky part here is the “URL Prefix” it asks for. You’ll want this to be the root URL (not the root path) of your application.

For example, if you were using WordPress, and it lived at http://www. mysite.com/wordpress/, you’d want to put that exact URL in the “URL Prefix” field.

And now, the power of dynamic code is even easier to wield and you’ve got yet another skill to add to your freelance web design repertoire!

___________________________________

Artisan Talent is a Digital, Marketing and Creative Staffing Firm placing talent in jobs perfectly matched with their skills all over the US. For available jobs, to submit your resume, or learn more about working with Artisan Talent, contact us here.