Join James Williamson for an in-depth discussion in this video Arranging panels, part of Dreamweaver CS4 Essential Training.
Dreamweaver features a wide array of panels for setting properties and performing tasks. Keeping track of and organizing these panels would be an exhaustive task if Dreamweaver's interface wasn't so well thought out. In this movie, we will take a closer look at managing and taking care of these palettes. So one of the easiest ways to change our palettes location and/or appearances is to simply use the preset workspaces. I can go up to the Application toolbar, to the workspace switcher and switch back and forth between workspaces. So if I don't like the Designer view for example, I can go to the Classic view and I get a very different arrangements of panels. Let me switch back to the Designer view real quick here. So that's one way to sort of hop back and forth between panel sets and different appearances within panels.
There are others things that we can do in panels that we can access that aren't part of some of these default workspaces. So if you need to access a panel that's not opened by default, you can go right up to the menu, go to Window and just find the panel you're looking for. Any currently open panel has a checkmark beside it, so it's really easy to find one that's not opened and go and open it up. You'll notice that this time, I selected the Tag Inspector and a new panel didn't really open up, it was just a part of a group, it wasn't active but it's still part of a group. So when I have multiple panel groups like we have here in the middle, simply Clicking on the tag for that particular panel, will focus on that panel and allow us to access that panel's content which is awesome.
Even though these panels are originally arranged within sort of this panel doc that we have over here on the right- hand side, they don't have to be. Notice with the Insert panel here for example, I could undock this by grabbing the tab and dragging it and releasing it and it floats out and undocks as a floating panel. So you can do that as much as you want. As a matter of fact, you could totally customize these, you can grab another panel, float it and you can even combine them together. So I can create new groupings out of existing panels. So you're really free to place these anywhere that you want and if I place this back into the grouping there, where it was previously, you'll notice that it's located now all the way over to right, instead of being the first one in the group, you can change that too.
I can grab this, slight it back over into the position I needed and it's right there on the left-hand side which is where I would normally find this. You can dock panels in other locations as well. I'm going to take the Insert panel, for example, I can move it up to the top and dock it horizontally, I could undock it again and I could even dock it over here on the left-hand side which would create two separate docks. So if you have a big enough monitor, you can even go ahead and have a panel dock on the right and a panel dock on the left which is pretty interesting. Let me go ahead and undock that.
If you do a lot of playing around like this, your interface can get really cluttered. So anytime that you want to reset one of your interfaces, all you have to do is get right back up to your workspace switcher, choose Reset and it will reload it right back where it was before. So all my panels are now right back in the position that they were before. Let's talk about working with these panel sets on smaller monitors. Right now these panels are taking up a lot of screen real estate and this can sort of make it hard to work on larger sites. So I can come over to my panel groupings and I have got a little icon right up here at the top of the dock and when I Click that, I can collapse these panels down to icons.
Now the first set of icons that you see also has the label of the panel. So simply Clicking that icon will activate that panel and now I can use it and do what I need to do and Clicking the icon again will collapse it back down to the icon. However, I can grab the divider between these and to further save a little bit of screen real estate, I can move the divider to the right and class it down to where these are simply icons. Once again, hovering over them will give me the name of the panel and Clicking on it will activate the panel just as it did before. Whenever I need these panels back out and expanded, I simply Click the icon up top, this expands the panel out again and I'm back to where I started.
If you're really looking for a fast way to hide all the panels and get everything out of the way, so you can simply work on your site, F4 is the function key you want to remember. If I Click F4, notice that all of my panels go away. They are not really gone, if you notice at the bottom, in the right side of the interface, there is sort of a little grey bar over there. If I hover over that bar, my panels come right back, I can access them, do whatever I want to do and then when I move my mouse away, they collapse again. So that's a very quick and easy way to sort of hide everything, only accessing these panels when you need to. F4 is a toggle, so hitting that key again brings the panels right back again.
What I hope this illustrates is how customizable Dreamweaver's interface really is. You can modify it to see your own personal workflow and as we will see, use workspaces to save these custom layouts to make switching between interface layouts quick and easy.
- 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.