Join James Williamson for an in-depth discussion in this video Managing workspaces, part of Dreamweaver CS4 Essential Training.
Frequently you'll be switching back and forth between tasks in Dreamweaver. Some days you might be doing heavy coding while other days you might be working with dynamic data or CSS layout. Often this will require using panels and tool bar layout that differ from each other significantly. Rather than having to constantly open and close panels and re- arrange them, we can use Workspaces to quickly switch between interface setups and even create our own when the presets don't suit our needs. The easiest ways is to access your Workspaces are to use the Workspace switcher right up here on the Application tool bar. If I click on this, I can see that I have a lot of presets, some for application developers, Classic view that helps mimic the last version of the Dreamweaver, the Coder view, the Designer view all switches are really fun stuff.
When working in one of these workspace layouts, you might do something to customize it little bit. So, for example here, I might decide that I want to float the CSS Style panel for whatever reason. And I can continue to work now and switch between workspaces and I switch back to Designer for example, notice that it sort of resets everything to where it supposed to be in Designer but here is something that's really curious about this. If I go back to Classic, it doesn't go to the default Classic view. It remembers that I have un-docked the CSS Styles panel when I'm in Classic.
Now this memory only persist for this session but this is really nice because if I go to Classic view and decide that there is just something that I don't like, for example if I don't like the split screen view or in this case the CSS Styles panel floating, I can set those out and then knowing that every time I go back to the Classic Workspace it remember this. Now what if I do something that I didn't mean to do? Maybe I'm going to un-dock the AP Elements as well and maybe dock those guys together and then I realize that's a mistake. Well here is something that you can do as well. I can go right back up to the Workspace switcher and and I choose to Reset the Classic Workspace. When I do that it goes right back to Dreamweaver's default version of the Classic Workspace. So it's really flexible and really customizable.
Speaking of customizing, you can create your own workspaces. Something that I do very frequently in Dreamweaver is run test on my site as I'm working. You notice if I go up to my Workspace switcher, there is really nothing here for testing so we are going to create our own. I'm going up to my menu and I'm going to go to Window and I'm going to go down and I want to find my Results grouping. And here we have Site Reports and all sorts of things that you can do when your checking and testing your sites. I'm going to go ahead and click on that. By default it sort of docks them below my Properties inspector and that causes again a lot of screen real estate to be taken up. So I'm going to grab the gray bar here and un-dock them and sort of float them out. Now when I float these guys out, maybe I want some of them but not all of them. For example maybe I don't need the Search and the Reference. I just want run some Reports. So I can grab those and un dock them and close them. So here we are customizing these a good bit.
So now all we have left in this sort of floating panel grouping it's going to be running Reports as Validation, Browser Compatibility, just stuff that we are going to using for testing. So I will go up to my Workspace switcher and I'm going to tell that I want to create a new Workspace. When I do that, I'm just going to go ahead and name this whatever I want, I'm going to name it Testing because that's what I'm going to using this for. So now that we have our new Workspace created, this is saved within Dreamweaver and every time I open up Dreamweaver, I'm going to have access to this workspace and that's really really nice. So now I can go up to my workspace switcher and I can go back to say Classic for a moment, to Reset Classic. I could go to Designer and notice that at the very top of this order is my custom workspaces. So your presets will be below your custom. So your custom Workspaces are always a little easier to find. Then I click on Testing and there go, we go right back to our Testing setup.
By using Workspaces, you can switch from task to task in Dreamweaver without spending a lot of time re-arranging panels and re-setting views. My advice is to take some time, once you start using Dreamweaver, notice how frequently you find yourself opening and closing certain panels. If you frequently open and close specific panels based on common task consider building a workspace around them so that you don't have to keep doing that on a day-to-day basis.
- Understanding current web design practices
- Learning and customizing the Dreamweaver interface
- Adding text and structure to an XHTML document
- Implementing layouts and designs with CSS
- Controlling all aspects of typographic presentation
- Working with images, Flash, and video
- Using behaviors and Spry widgets
Skill Level Beginner
Q: In Dreamweaver CS4, is it possible – or recommended – to use a table within a form, in order to line up the fields?
A: Using tables to layout forms is a common web design practice. There are drawbacks to doing so, because it reduces the accessibility of the form, but many, many designers use this technique. There are many ways to layout forms using CSS that don't require tables (see Chapter 8, "Styling Forms" in the Dreamweaver CS4 with CSS Essential Training title), but the forms will work fine should one choose to do so.
Q: How do I direct a link to an FLV movie to open in new browser window, using Dreamweaver CS4?
A: To link to an FLV in a new browser window, create a separate HTML page with nothing but the Flash video on it. Set the video to “autoplay = true”, since clicking the link will be all the input needed by the viewer to play the video. Align the video to the center of the page. (Use a div tag and center the div tag on the page). Make sure the new window opens to the size of the video player, making sure to allow for the browser;'s title bar, menus, chrome, etc. Also, if desired, offset the video byadding left="" and top="" attributes to the behavior. Enter the pixel amount for left and top offset or the window will always open aligned to the top left of the screen.
Q: The author states that the Mac OS version of Dreamweaver CS4 does not support the direct insertion of Word files, and that copy and pasting text from a Word file will format the text as links. How does one add and format text in Dreamweaver CS4 on a Mac, without turning the text into links?
A: Although the Mac version of Dreamweaver does not support the direct insertion of Word files, you can copy and paste from Word into Dreamweaver (as is recommended in the tutorial for Mac users). To control how the text is formatted, go to Dreamweaver > Preferences and select the Copy/Paste category. From there, Mac users can access the same controls that Windows users get when inserting a Word file. Just remember to select the proper preference before copying and pasting from Word.
Q: Is there any way to change a nested template from a two column structure to a single column structure? As explained in the "Working with nested templates" video, it appears that the nested template must maintain the same basic structure as the main template. If one is using a template with a header, footer, main content area, and sidebar, is it possible to create a template without the sidebar?
A: Making these changes is possible, and there are a few ways of doing it. First, one could make the sidebar an optional region. For info on that, check out the “Creating optional regions” video of the Dreamweaver CS5 Essential Training title. (The technique works the same in CS5 and CS4).
Q: Upon selecting Edit in Flash for a SWF in Dreamweaver CS4, an error message appears that says:
Unable to launch Macintosh HD: Applications:Adobe Extension Manager CS4:Adobe Flash CS4:Adobe Flash CS4.app. Please be sure that this application exists and that there is enough memory to run it.
Ctrl-clicking the SWF in the Design view and choosing Go to source file from the contextual menu and then selecting the FLA file from the list will enable the Edit button, but the file opens in Flash independently and not via Dreamweaver. What is causing this error?
A: Unfortunately, Dreamweaver's round-trip workflow is somewhat buggy, so there are several possible explanations.
The lynda.com exercise files are not structured the same way a normal website would be, so redefining sites and moving files around as you do from lesson to lesson can cause problems.
Usually the Edit button will be grayed out if Dreamweaver doesn't know where the original FLA file is located (as can happen when they are in different directories). This can also happen if the FLA and the SWF have different names. ("file1.fla" publishs "mymovie.swf" for example.)
One possible solution is to set the source in the Properties Inspector. Another is to re-establish the link to the source file via the point-to-file icon. If the problem persists, browse for the FLA file if prompted by Dreamweaver. This should establish a link between the SWF and the FLA file.
Unlike the PSD integration, Dreamweaver does not import the FLA file, but the SWF, so Dreamweaver has to be able to "see" the source FLA file in order to make the round-tripping work. As the files are moved around between multiple programs, they go through several rounds of compression. This alone can cause features like this to result in an error.
To test if the problem is with the system and not the software, delete the SWF file from the page, re-import it using the Insert panel or menu, and then save the page. This should clear out any caching problems with the old SWF file and re-establish the link.
Q: I am unable to recreate the exercise enabling me to make new CSS rules for the body and header text, as shown in "Understanding Element Selectors." The headers don't update after I enter the H1 rule.
A: The most likely explanation is that the wrong option is selected in the CSS Rule Definition dialog. Make sure the pull-down menu says Tag for the selector type, not Compound, which it tends to default to. That should resolve the problem, and all for new CSS styles to be created.