Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS4 New Features

Understanding related files


From:

Dreamweaver CS4 New Features

with James Williamson

Video: Understanding related files

One of the biggest workflow improvements with CS4 is the addition of the Related Files options. In previous versions of Dreamweaver if you wanted to work on associated or linked files you'd have to open them separately and then tab between them. Now you can work on external code while the main file is still open. Before we get into exploring how related files work, I want to take just a moment to talk about the related elements hierarchy, to understand which files are going to be displayed as a related file and which files are not. So looking at the slide, our source code would be index.HTM and it might have linked via a script tag or a link tag in the head of the document some external documents such as CSS or some JavaScript, a server-side include or a Spry data set. That is called a first level child document and those will all be displayed as a related file.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Dreamweaver CS4 New Features
1h 57m Intermediate Sep 23, 2008

Viewers: in countries Watching now:

In Dreamweaver CS4 New Features, Adobe Master Instructor James Williamson focuses on the improvements that benefit typical workflows in this popular web design and development tool. James demonstrates how to make efficient use of the new user interface, including the workspace manager, code navigator, Live view, and Property inspector. He also explores the capabilities of the Spry AJAX framework, including validation, tooltips, and datasets. Exercise files accompany the course.

Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Understanding related files

One of the biggest workflow improvements with CS4 is the addition of the Related Files options. In previous versions of Dreamweaver if you wanted to work on associated or linked files you'd have to open them separately and then tab between them. Now you can work on external code while the main file is still open. Before we get into exploring how related files work, I want to take just a moment to talk about the related elements hierarchy, to understand which files are going to be displayed as a related file and which files are not. So looking at the slide, our source code would be index.HTM and it might have linked via a script tag or a link tag in the head of the document some external documents such as CSS or some JavaScript, a server-side include or a Spry data set. That is called a first level child document and those will all be displayed as a related file.

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.

Well, everything is almost working properly, but our tabs themselves. When you click on one, it's supposed to display what you're currently looking at and it doesn't yet and that has something to do with the external JavaScript file. So let's use our Related Files feature to click on the SpryTabbedPanels.JS and we'll take a closer look at our JavaScript. Well, I'm going to scroll down to the very first function, which is our constructor function and I need to take a look inside that at the names of the classes that are being assigned to the different states of the widget. Currently the TabbedPanelsSelected class is being assigned to a tab that's been selected and this is incorrect. So I will want to do is I want to click between the word Panels and Selected and I'm going to, with a capital T, I'm going to rename that TabbedPanelsTabSelected.

Once again, notice that the external JavaScript file's been modified but our main shop file has not so we'll go ahead and save that. Remember, that's a Ctrl or Command+S. Now Live view is awesome, but it doesn't always show you everything you as accurately as you might want to see it. So you always wanted preview something in a browser. So I'm going to click on Preview in Firefox. So I can open us up in a browser and I'll scroll down a little bit so I can see the widget in its entirety, and now the widget is working properly. Not only is it the proper with, but the currently selected tab now highlights as it should be doing. So perfect.

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.

There are currently no FAQs about Dreamweaver CS4 New Features.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked