Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Taking in the Panel Panorama

Now let's take a look at Dreamweaver's vast array of panels, all available from the Window menu. By default, panels are grouped in a column on the right side of the screen. Panels contain many commands that relate to specific tasks in Dreamweaver, such as working with Cascading Style Sheets or with the files for your site. If you've worked with other graphics programs, then the concept of panels may be familiar.

The Frames panel, poised for heavy page layout action.

Panels contain many commands that relate to specific tasks in Dreamweaver.

A Traveler's Guide to Dreamweaver Panels

Sorting out panels in Dreamweaver can be a little confusing, because at times there seems to be no consistency in how they've been organized. Some panels sit on their own, while others are a part of what are referred to as panel groups. Still others look and smell like panels, but are actually called inspectors. Confused? Take a nap and come back.

Ever notice how tomatoes look like really mad oranges?

The panel descriptions that follow begin at the top of the Window menu and proceed on down:

CSS Styles (Window > CSS Styles or Shift+F11): You can use the CSS Styles panel to create, edit, and delete internal and external style sheets.

Layers (Window > Layers or F2): As mentioned in the first chapter, layers allow you to position objects wherever you want on your page.

Behaviors (Window > Behaviors or Shift+F4): Whoa, Sally! This is where the good stuff is. Here you can add all sorts of interactive JavaScript functionality to your page...without knowing JavaScript!

Behaviors allow you to add a lot of interactivity to your pageand you do it all right here.

Files (Window > Files or F8): The Files panel lets you view and manage the filesboth local and remotefor your site. This is one of the most important panels Dreamweaver has to offer.

Assets (Window > Assets or F11 [Windows], Option+F11 [Mac]): The Assets panel contains all the elements and components that you've set up for your site, including graphics, Macromedia Flash files, templates, scripts, and colorvery cool.

Snippets (Window > Snippets or Shift+F9): Snippets are huge timesavers. Use this panel to insert code for common page items such as tables, headers, and navigation elements.

Tag Inspector (Window > Tag Inspector or F9 [Windows], Option+F9 [Mac]): The Tag Inspector contains the Behaviors panel (described earlier) plus the Attributes panel. The Attributes panel lists the tags you've used on your page and also allows you to make changes to the tags' attributes.

Geek's Delight

Have money to burn? Consider purchasing a second monitor to hold Dreamweaver's many panels. This way, they won't be getting in the way while you work, but they'll still be easily accessible. Your friends might think you're a geek, but it'll be so sweet!

Results (Window > Results or F7): The Results panel lets you perform several commands at the site levelfor example, you can perform a sitewide Find and Replace operation or check your site in popular web browsers.

Reference (Window > Reference or Shift+F1): The Reference panel is a built-in resource for looking up definitions of code blocks. Remember that we discussed this briefly when we talked about Dreamweaver's online help? Use the Reference panel to find out what a particular piece of code does, how it works within a page, and much more. It's an incredible resource.

History (Window > History or Shift+F10): Are you familiar with History in Photoshop? Same deal. If you're not into Photoshop, here's the scoop: The History panel tracks all your movements as you work. You can then use the panel as a sort of über-undo, and even save steps as a commandsort of like a macro. Great for those repetitive tasks that even the intern refuses to do.

Not only is History Dreamweaver's megaundo, but you can also use it when you create macros.

Frames (Window > Frames or Shift+F2): Unless you're working with a frameset, the Frames panel will come up blank. Once you've actually built a frameset, you'll see how the Frames panel helps you keep organized and also make changes to your frames-based layouts.

Code Inspector (Window > Code Inspector or F10 [Windows], Option+F10 [Mac]): The Code Inspector gives you another way to view the source code behind your page. If you've set yourself up with two monitors, you can have Dreamweaver's Design view on the main screen and the Code Inspector stretched out nice and big on the other. That way, you can see your visual layout and your code at the same timean awesome way to work.

Timelines (Window > Timelines or Alt+F9 [Windows], Option+F9 [Mac]): Timelines allow you to control the movement and timing of objects on the page. Have logos zoom across your page or have a layer slowly scroll downward. It's fun stuff.

Dreamweaver's Timelines panel, always ready to add animation to your pages.

Exploring the Locale: Managing and Customizing Panels

The panels are all organized into panel groups based on tasks. For example, the Files panel is grouped with Assets because both handle sitewide tasks. Or the Reference panel is grouped with Snippets as these two panels provide assistance with source code. The active panel is the one in the group with the tab at the top. To open another panel in the group, try clicking its name, which is also at the top. When your mouse hovers over a panel name, it will become underlined (Windows) or bold (Mac), indicating that the panel's ready to come out and play. You can expand and collapse panel groups to make way for other panels or simply to open up your workspace. Just click the twisty arrow or the name of the panel group (both at the top of the panel), and the entire group collapses. Click again, and the group expands.

If you live in a town where the local roadhouse has heifer, wild, nest, or "...and plumbing" in its name, it's time to move.

Noteworthy

Too many panels getting in your way? Press F4 to temporarily hide all of Dreamweaver's panels and inspectors. Press F4 again to bring everything back.

In Windows only, the panels are docked, or connected, to the right side of the screen, as we discussed earlier. If you want to free up a bit of screen real estate, try clicking the Expand/Collapse arrow on the border that divides the panels from the main work area. This collapses all the panels to the right and opens up the work space. Click that same arrow, and the panels expand back. If you want to expand your work area vertically, click the Collapse/Expand arrow just above the Property Inspector.

In Windows, Dreamweaver provides a horizontal and vertical Collapse/Expand button so you can easily increase your workspace.

If you want to close a panel group, choose Close Panel Group from the Option menu, found in the top-right corner of the panel. To open a panel again, choose the panel name from the Window menu.

Closing panels is no biggie. Just head to the panel's Option menu.

To stretch out a panel to its full size, right-click (Windows) or Control+click (Mac) a panel's title bar and choose Maximize Panel Group.

Noteworthy

To make working with panels easier, I pull all my panels apart so that they float on their own. Then I turn off the display of any that I don't use on a regular basis to free up my workspace.

Also, you can always tear away panels from the main group by dragging the gripper area in the top-left corner of the panel and dragging toward the middle of the screen. Voilàa floating panel. If you want, you can even have a combination of floating and docked panels in your interface. Personally, I'm not a big fan of docked panels. I don't like having all the panels jammed together in a narrow column, especially for panels like Files and Assets, which require a little more elbow room.

After a panel has been torn away, try making it larger by dragging any of the four sides (Windows) or the bottom-right corner (Mac).

Noteworthy

Dreamweaver's so flexible, it'll even let you rename panel groups. Go to the panel's Option menu and choose Rename Panel Group. Y'all can even use cuss words if ya like.

To redock a floating panel, just drag it back into the docked panels. Dreamweaver indicates with a black frame (Windows) or blue line (Mac) that the panel is about to be docked. And in Windows, you can even dock panels on the left side of the screen. Oooo!

Noteworthy

Once you've organized Dreamweaver's interface to your liking, save your arrangement as a workspace layout.

You can also reach commands in Dreamweaver through the menus.

Noteworthy

Another great way to access common commands in Dreamweaver (or any program for that matter) is to use contextual menusthat is, the good old right-click (Windows) or Command+click (Mac).

Stopping for Lunch: A Look at Dreamweaver's Menus

You can get to the commands and functions you're after in Dreamweaver in many ways. You've already taken a look at Dreamweaver's toolbars and panels, but you can also reach commands through the menus. There are many options hiding in the menus, so keep your eyes open as we take a quick hike through them to see what's in storeand make sure you're wearing comfy shoes!

The File menu is always at the ready to assist with common functions.

Edit provides many features, some you may already be familiar with.

If it's related to display, it's on the View menu.

Noteworthy

One of the most common commands on the Edit menu is Undo. By default, Dreamweaver lets you undo your 50 most recent actions (also called History Steps remember the History panel?), but if you think you may be too accident prone, you can change this to another number. Choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac) and click the General category on the left.

File menu: In addition to the File menu regulars, such as New, Open, and Save, this menu offers handy commands such as Preview in Browser and the Check commands on the Check Page submenu. Use these options to see how your page appears in popular browsers and to have Dreamweaver check various components of your page respectively.

Edit menu: The Edit menu also offers a lot of regulars. Undo, Copy, and Paste are all here, as well as Find and Replace and Tag Libraries. You'll also find a batch of selection commands, as well as a few other handy tools for working with code, such as Code Hints and Code Collapse.

View menu: The View menu contains the commands for controlling the visibility of many Dreamweaver elements, such as rulers, guides, and panels, and lots of other good stuff, such as zooming, the Table Mode, and the workspace view commands. If it's related to display, chances are it's on the View menu.

The Insert menu is all about getting different types of content onto your pagebut this is just one of several methods.

The Modify menu is always ready to help manipulate selected page elements, such as tables and templates.

Handle your text with ease with the Text menu.

Insert menu: Getting content placed on your page couldn't be easier with the Insert menu. You'll find it all thereimages, media elements, tables, forms, and on and on. In many ways, the Insert menu options mirror those available on the Insert bar, so you can use whichever approach you prefer to insert your page content. Check out the Tag option, which fires up the Tag Chooser (this allows you to pop in code for common page elements), or Template Objects, which opens up the vast world of Dreamweaver templates.

Modify menu: The Modify menu is similar to the Property Inspector in that it allows you to make changes to selected page content, but there're also some additional commands you may find useful, like the table, template and frameset options, for example. Further, the first command, Page Properties, will let you specify settings for the current page.

Text menu: If you want to modify text on your page, the Text menu is the place to be. Changing font, size, and color options couldn't be easier, and this is where you'll find the Spell Checker, too. Also use this menu to handle you102 heading tags and your Cascading Style Sheets.

Take the repetitiveness out of everyday tasks with the Commands menu.

It's all about setting up a site ahead of time, and that's where the Site menu comes in.

The Window menu: where panels go when they're on vacationplus a few other nifty goodies.

Commands menu: The Commands menu ties into the History panel. As discussed earlier, you can use the History panel to create and save commandsa process similar to creating macros. The Commands menu is where you actually do this. Record commands, edit them, and run some preexisting commands, too.

Site menu: The Site menu may seem short, but it's a big subject. Pack an overnight bag and head for Chapter 4, where we really get into it. Essentially, you'll be using this menu to create new sites, edit existing ones, and upload your work.

Window menu: As you saw in the previous section, the Window menu stores all of Dreamweaver's panels. It also has a few other goodies packed in. For example, you'll find a handful of commands for managing open documents and for saving and organizing workspaces.

Help menu: As discussed earlier, the Help menu is where you get assistance with Dreamweaver. Dreamweaver's online help is packed with great content in an easy-to-navigate format. If you're a newbie, definitely check out Dreamweaver's built-in tutorials.

Never feel left alone again. The Help menu is your warm blanket on a stormy day.