Join James Williamson for an in-depth discussion in this video Managing files and folders, part of Dreamweaver CS4 Essential Training.
I often think of my sites as living, breathing things, since they can change so much over the course of a day. As you work on a site, you're constantly creating new files and folders, renaming files and moving files around within your directory structure. In Dreamweaver, here we use the Files panel to make the majority of these changes. Using the Files panel, I can create new files and folders, rename files, move files and folders, copy and paste files, you name it. Not only is using the Files panel the most efficient way to make these changes within your site, it's also the safest way.
Websites by their very nature, rely on understanding where other files are. When you place an image on a page or a link to another file, Dreamweaver places code on your page that tells the browser where it can find that particular file or where it can find that particular image. If you move a file and it doesn't update the link on any pages that reference it, your link no longer works or in the case of an image, the image no longer displays and that's especially problematic for larger sites where dozens of pages might link to a single page.
Making all those changes manually would take considerable time. But if you remember to use the Files panel to make these changes, Dreamweaver will automatically update all links on that page as well as any pages on your site that link to that page. Let's take a closer look on using the Files panel. So the first thing I'm going to do with the Files panel, we have right over here, I can see that's showing my Groundswell site. I'm just going to create a new file. Now I can do that by going up to the root directory and simply Right-Clicking. And of course on a Mac you would want to Ctrl+Click and notice that right here I can choose to create a New File or a New Folder. I'm going to create a New File. I have a new file at the very bottom of my Files panel now called untitled.html, I'm just going to go ahead and to call it test.html.
For those of you on a PC, when you're creating a New File through the dialog box and saving it, Dreamweaver will go ahead and place the extension for you. That does not happen in the Files panel. So always remember to put the extension on there. If I double-Click this new page, I can see that it is totally empty, so it's just a brand new page, nothing on it, nothing within the code, other than what our preferences are set up for. So I can go ahead and close that. In addition to creating files, you can also edit them from here as well. Again if we go back to our test. html and we Right-Click or Ctrl+Click that, I can go to Edit, and I can Delete it. And it's going to prompt you because you can't really undo that and as soon as you delete it, now that file is gone. You can create new files as well as get rid of new files directly from the Files panel.
What about renaming files? Sometimes in a lot of programs, you would have to open something up and then do a Save As to rename it, but with the Files panel we don't really have to do that. I'm going to expand my Files panel, I can move it right here, just drag this out a little bit. And that's going to allow me to increase the size of the naming so I can see what's going on here. So all of the pages, that are referencing boards, have an underscore, but boardsCrunge has that upper case C. We know with our file naming conventions, that's really not a good idea. So what I'm going to do is I'm going to Click on this once and then Click on it again to activate the name. Now if you Double-Click really fast, it's going to open it up so be careful about that.
I'm going to highlight that and do a _c. So now it saysboards_crunge. Here's where we might run into a problem because all the other pages are linking to a file that has boardsCrunge as one word and now the file name is going to change so let's take a look at what Dreamweaver is going to do about that. I'm going to hit Enter and Dreamweaver automatically says hey, these files were linking to that file and they were using the old name. Do you want me to update them or not update them? There's no real good reason here not to update them, so I'm going to say Update and now all those pages, let's go ahead and open one.
So if I open up the boards_swells page, and I go up and find the link for the crunge which is right here. I can see that now it's linking to the page name that I just created. So if you look down the Properties inspector, you can Click on this image and you'll see that it's linking to boards_crunge.htm. That is awesome. Now I'm going to close this file because file management can go beyond this. If I go up to my site and look at all my folders, I can see that I do have a sub directory called lifestyle and it's got all of the pages that are in a lifestyle section. Well my gear section has got a lot of pages too, but they are all sitting in a root. They really ought to be in a sub-directories so that I can keep my site a little bit more organized. So what I'm going to do is go right back up to the root directory, Right-Click, choose a New Folder, and let's call this new folder gear. Right now it's empty but we are going to put some pages in it. So I'm going to highlight the board_comparison page and using the Ctrl key or the Command key on the Mac, I'm going to select some non contiguous files here.
So I'm going to select boards_crunge, swells, velvet and comparison and we might as well go ahead and select board too because gear page is the only one that's not selected there. So all the boards pages, go ahead and select all of those guys. The gear folder is empty but we can simply drag and drop into the gear folder to move all of those files into that sub-directory. We get a much longer listing. And it says okay, everybody that was pointing to one of those files also needs to be updated because again we are moving a location within the directory structure so be sure to always choose Update and we are going to go ahead and update that, perfect.
As you can see the Files panel can save you a tremendous amount of time when managing files and folders as well as save you from making costly errors, of course that's not all the Files panel can do, later in this title we will discuss using the Files panel to upload and download your remote files as well a helping you work in a collaborative environment. For now however concentrate on making sure you practice discipline when needing to make changes on your site. Make these changes from within Dreamweaver, using the Files panel instead of using your operating system and you'll be confident of making these changes correctly and without any costly errors.
- 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.