Home
Username:
Password:
Adobe Dreamweaver CS3 Tutorials

Dreamweaver Workspace / Workspace Layout Overview

Subtitles of the Movie

The Dreamweaver workspace lets you view documents and object properties. The workspace also places most of the common operations in toolbars so that you can quickly make changes to your documents. Basically, it's divided into a variety of sections. Up at the top, you have the Insert Bar. Notice that it's divided into various tabs: Common Layout, Forms, Data, Spry, which is a new tab, Text and Favorites. I'll be reviewing the Insert Bar in more detail later. You've got the Document toolbar, which is this one here with the icons for adding a link, adding a named anchor, inserting tables, DIV tags, layers, and so on. You've got the Document Window, which is the majority of the workspace. The Tag Selector is down here at the base of the document window; it's a very important section of the workspace that I'll be covering various times during this tutorial. We've also got the Property Inspector, very, another very important component. I typically leave my Properties Inspector open all the time and commonly anchor it here on the bottom. You've got a Files panel, which I've already covered, which lets you manage your folders and files, and then lastly, you've got a variety of panel groups that are accessible via the Window menu, and those come either in groups together or you can separate them. For example, here is the CSS panel, and I can notice, tab these, so that they're grouped together. There's the AP Elements panel, which is a tab there. I've got my Assets panel and my snippets; notice that I can combine and merge these various panel sets into either groups that are tabbed there, or I can grab the end here of the CSS panel, notice, and separate from the panel group so that it's a free-floating window. I can close the panel sets, as well as reopen them, using again, the Window menu item. In Windows, Dreamweaver provides it all in one window integrated layout. In this integrated workspace, all the windows and panels are integrated right into a single, larger application, so notice that I can move this entire window around and all of the sub-sections of the workspace; go with it. On the Mac operating system, Dreamweaver can display multiple documents in a single window with tabs that identify each document. Dreamweaver can also display a floating workspace, in which each document appears in its own individual window. Panel groups are initially docked together but can be undocked into their own windows, as I demonstrated previously. Notice here I have four panels all docked together. In Windows, they snap automatically to each other to the sides of the screen and to the document window as you drag or resize them. Notice that I can take, for example, my CSS styles and anchor it over here to the interface, or D-anchor it. Notice that as I move it around the interface, I'll get highlights in the interface, workspace that tell where I can dock that panel. Let me go ahead and move the Properties panel out of the way, and you can see that I can also, in addition to docking to the left or to the right, I can also dock on the bottom. Let's try it with the Properties Inspector. Takes a little bit of practice to get used to that docking and undocking. You can also choose your workspace layout in windows. You can switch to different workspace at any time. This feature is only available in the Windows version of Dreamweaver. You do this by selecting Window workspace layout. I'm going to go ahead and move this over so you can see this better window workspace layout, and then you've got Test Coder, Design Dual Screens, Save Current, or Manage, so you can also customize your layouts by adjusting your layout the way you want it and then go ahead and press the Save Workspace Current option from that Window menu. Give your layout a name, and then the next time you want to use that particular layout, you can access the layout here from the workspace layout. Notice I have one called Test that I saved earlier. Kind of convenient way to work. This workspace layout is common in all of the Adobe CS3 applications. It's an effort that Adobe has made to integrate and make consistent the various workspaces of the applications in the various CS3 programs. Let me now move on to the next movie and review in more detail these various workspace layouts, the default layouts, the designer layout, the coder layout, and the dual screen layout, and I'll cover each of these in my coverage in the next movie.

Tutorial Information

Course: Adobe Dreamweaver CS3
Author: James Gonzalez
SKU: 33789
ISBN: 1-934743-04-6
Release Date: 2007-09-06
Duration: 10 hrs / 125 lessons
Work Files: Yes
Captions: For Online University members only
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 81,350 Video Tutorials (20,800 free)
  • Video Available as Flash or QuickTime
  • Over 782 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available