Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now if any of those files in turn have external files loading into them, you typically will not see those displayed unless they're part of a CSS file. Cascading style sheet files will display as a related file, no matter how far nested they are into their document structure. So as a general rule, it's only going to display first level child documents, but it will display deeper level documents if CSS is involved. OK, so with that let's switch back into Dreamweaver and take a look at our Related Files feature.
Now back in Dreamweaver I've opened up the shop.HTM file. If you're following along in the exercise files with me, you can find this in the 02 folder, shop.htm and I'm just going to go ahead and open this up. If I scroll down a little bit, we have a little Spry widget down here that doesn't look quite exactly the way it's supposed to. If I switch over to Live view, to maybe preview this a little bit better I can see that some of functionality is happening, but the widget doesn't look the way that is supposed to. There's some stuff being clipped off or trimmed off and it's just not right. So I'm going to turn Live view off. We'll scroll back up and let's take a look at the related files.
Now underneath the shop.HTM tab, you can see that we have the main.css, SpryTabbedPanels.CSS and the SpryTabbedPanels.JS. So these are three external files there helping make our page work. Now they're all first level child documents except for the SpryTabbedPanels.CSS. If we look over the CSS Styles panel we can see that main.css actually contains that. So it's not a first level child document, but it still displays because it's cascading style sheets.
OK well, let's take a look at editing this and before I start using the Related Files feature I'm going to modify my workspace a little bit to make that a little bit easier on me. Now the first thing I'm going to do is collapse my panels to icons because I don't really need my panels for what I'm going to be doing. I'm also going to switch to Split Screen view. This way I can see the related files on the left-hand side and the actual Spry widget itself on the right-hand side as I'm working on it. Now if you switch to Split Screen view and you get that horizontal view rather than a vertical view, remember, you can need to use the Layout icon, right up here in the Application toolbar and make sure Split Vertical has a check beside it or you can go to the View menu and you can choose Split Vertically there as well. Just make sure that is checked.
It's a lot easier to work, in my opinion, in the vertical split view then it is horizontal. OK. Well, the first thing we're going to do is go over to our SpryTabbedPanels.CSS. One of problems is our content isn't fitting inside that anymore so we need to adjust the rule that is adjusting the width of the spry widget itself. So I'm going to scroll down to find the class rule TabbedPanelsContent and it is a good bit down so you're going to have to scroll a little bit here and we're going to find this- here we go.
At about line 132. Well, currently the width of our widget is 500 pixels and that is not wide enough to let everything fit. So I'm going to highlight this and type in 726 pixels. Now when I do that notice that the little asterisk that represents an unsaved file appears only beside the related file. It doesn't appear beside shop.HTM because we haven't edited that file at all. So now I can either do a save or Ctrl or Command+S to save just that SpryTabbedPanels.CSS. Now if I look over in the Design view now, notice that when I clicked over in that, it updated and let me scroll this over a little bit so that we can see now all of our content is now fitting inside that widget, which is really nice. So now just by making one change to an external file, our widget is working correctly and we didn't have to open up another file and tab between it. We just used our Related Files feature.
Let's close that and go back into Dreamweaver. Well, I think it's pretty easy to see how much time the Related Files feature can save you, especially if you're using a lot of server-side includes or external scripts. So in our next video we'll focus on another new feature that when combined with the related files really speeds up your workflow, the Code Navigator.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.