Dreamweaver Workspace / Panels Overview
Subtitles of the Movie
Continuing my overview of the Dreamweaver workspace let me now say a few words about some more important windows and panels that are accessible via the Windows menu starting with the Insert panel, that's over here to the left, very important panel. It allows you to insert a variety of elements and components, this panel is divided into tabs, common layout, forms, data, Spry, text and favorites, I covered this previously, Next, we also have the properties inspector which I covered but third in the list is a new one, CSS styles, this will allow you to work with the various cascading styles and style sheets that you've either attached or you've embedded in your file, more about CSS styles later. Underneath that we have AP Elements, this will allow you to set your z-index or your stacking order as well as your IDs of elements, let's go back and create a new blank document here and then let's use the Insert panel to insert from the layout tab of the insert panel, let's draw AP DIV, in fact let's draw three of them and let's overlap them and one more AP DIV and let's open up my Property Inspector and let's color each of these DIV elements so we can see them easier so I have a green one and a blue one and a red one and notice that the stacking order is the green one is on top, that's going to be AP DIV 3 because the z value is 3, the middle one is AP DIV 2, notice that also the tag inspector down there identifies this AP DIV, so this is the AP Elements window that helps you identify with an ID your AP DIVs as well as set the stacking order, so I can set this to 0 and then that will change the stacking order there but continuing down my list of windows and panels here, in the Windows menu we have Components, use the components panel to create and inspect components and to insert component code in your pages. Underneath that we have the Files window, also referred to as the Files Panel in the Dreamweaver documentation. Use the files panel to manage and view the files in your Dreamweaver site but continuing down the list, let's close these panels, we now get to the Assets panel where you can manage your various assets, this is broken up into various windows here, first I have assets such as graphics, jpegs and gifs, images, then I have colors, those are my color hexadecimal colors that I'm using in this site then we have a list of links, SWF flash files, these are direct or Shockwave files, if I had any and then video files, scripts, templates and library elements which I'll be covering later. But proceeding down my list I now get to the Behaviors panel, this is one of my favorite panels, using this panel you can insert Javascript based behaviors to add interactivity and interactive elements to your Dreamweaver documents including effects such as growing and shrinking and highlighting, shaking, AP DIV tag sliding and squishing, go to URL, check for plug-ins, open browser windows, pop-up messages, set text, show and hide, AP DIV elements and much much more. Next, we have the History panel that will show you all of the steps and actions that you've performed on this file since you last saved it. This history panel works very similar to other history panels found in other Adobe applications such as Photoshop or Flash. Underneath the behaviors and the history, we have the Frames Inspector or the Frames panel, if you do work with html frames this will be a useful tool, I don't normally use frames very often so don't use that tool but if you do like to use HTML frames you will use this panel and then the last panel I want to cover is the Code Inspector that will allow you to look at your code while you can still see your page here in design view, in this case it's HTML code since I'm working with an HTML document, notice that it also includes the AP DIV CSS that was created when I drew the AP DIV elements here. So there you have an overview of some of the more important of Dreamweaver workspace components and elements, let me now move on to the next movie and review all the various options in the Insert Bar in much more detail.
Tutorial Information
| Course: | Adobe Dreamweaver CS4 |
| Author: | James Gonzalez |
| SKU: | 33968 |
| ISBN: | 1-935320-30-0 |
| Release Date: | 2009-02-13 |
| Duration: | 9.5 hrs / 104 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| 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
United States 