New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

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

Dreamweaver CS3 Beyond the Basics
Illustration by

Loading behaviors in Dreamweaver


From:

Dreamweaver CS3 Beyond the Basics

with James Williamson

Video: Loading behaviors in Dreamweaver

Welcome back. We are almost ready to make our behavior function, but there is one more thing we need to take care of. So if you are working along with the exercise files, make sure you have the styleSwitcher.htm file and the styleSwitcher JavaScript file opened. We are focused right now on the styleSwitcher.htm file. This is our actions file. If you remember when we created it, we imported a shared JavaScript file from the Adobe Dreamweaver configuration folder called String.js. Since we had the browser's location and it's located outside of our root directory, Dreamweaver went ahead and put an absolute path in there. Well, that absolute path is not really going to work out for us.
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

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 CS3 Beyond the Basics
11h 10m Intermediate Sep 21, 2007

Viewers: in countries Watching now:

Covering diverse topics such as improving workflow and managing CSS styles, Dreamweaver CS3 Beyond the Basics is a hands-on course that teaches users how to move beyond standard, static websites. Instructor James Williamson explores how to increase productivity, interactivity, and accessibility with Dreamweaver. He also discusses how to extend the application's capabilities with XML and XSL. Exercise files accompany the tutorials.

Topics include:
  • Reviewing and customizing the coding toolbar
  • Understanding the CSS Styles panel
  • Using absolute and relative positioning
  • Creating accessible forms
  • Building AJAX pages with the Spry framework
  • Extending templates
  • Working with XML and XSL
  • Building dynamic content
  • Creating custom behaviors in Dreamweaver
  • Running reports
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Loading behaviors in Dreamweaver

Welcome back. We are almost ready to make our behavior function, but there is one more thing we need to take care of. So if you are working along with the exercise files, make sure you have the styleSwitcher.htm file and the styleSwitcher JavaScript file opened. We are focused right now on the styleSwitcher.htm file. This is our actions file. If you remember when we created it, we imported a shared JavaScript file from the Adobe Dreamweaver configuration folder called String.js. Since we had the browser's location and it's located outside of our root directory, Dreamweaver went ahead and put an absolute path in there. Well, that absolute path is not really going to work out for us.

So if we understand where the location of the behaviors are, we will know how to navigate to the script. So we need to have a document relative link from the location of the behavior to this script. Our behavior files are located in a configuration folder. So if I am looking at line number 6 in Code view on the styleSwitcher. Inside the configuration folder is located the behaviors folder, and there is a folder inside of that called Actions, and that's where this is going to reside. So if I go up from the Actions Directory and then up from the Behaviors Directory, I will end in the Configuration Directory. So now, we have got a really good idea of the path that we need to take to get to our shared JavaScript file. So I am going to go ahead and highlight everything except for the forward slash Shared, and I am going to type in dot, dot forward slash.

That will type me up out of the actions directory into the behaviors directory, and then another dot, dot forward slash. That will take me into the configuration directory and then Shared/MM/Scripts/CM/string.js. So that's the path that we need. So just double check your path, make sure you see, dot, dot forward slash, dot, dot, forward slash, Shared, MM, Scripts, CMN, string.js. That's the correct path. So now our behaviors file will be able to access the string when it's inspecting the behavior. Okay. I am going to save this again. Now, we need to move these files into their proper location in the configuration folder. Now, we can certainly bring up a window and copy and paste them that sort of thing, but you can also just save them directly into those directories and that's what we are going to do.

If you do that, make sure that you do not update links. We almost always say Yes when Dreamweaver asks us if we want to update links. But we have the correct path to each other and we have the correct path to the external JavaScript files. So we don't want to mess those links up. So I am going to go into my styleSwitcher htm file and I am going to choose Save As. That way it just doesn't overwrite my old one, and I am going to go to my Applications directory, Adobe Dreamweaver CS3, and I am going to find configuration. Now, if you are on a PC, remember you are going to go in your Program Files, Adobe, Adobe Dreamweaver CS3, and from that point on, the path should be the same. So we'll say Configuration, Behaviors, and Actions. So they are stored within the Actions.

So I will choose Save. It's going to prompt me if I want to update my links. I am going to say No, and it will keep the links exactly the same. After I have saved the file, I will close it. I will go into my styleSwitcher.js and I will do the same thing. I will say Save As and again I need to navigate. So Applications, Dreamweaver CS3, Configuration, Behaviors, and Action. So by now, you should be used to that path, but again, if you are on the PC, it's Program Files, Adobe, Adobe Dreamweaver CS3, Configuration, and you're on the same path we are now. So let's go to Actions, and I am just going to hit Save. Again, it's going to ask me if I want to update links. I am going to say No.

All right, now I can close this file as well, just to make sure there is no confusion about my local files that I am going to keep in case I need to debug them or the files are actually in the configuration directory. Now, Dreamweaver loads the behaviors every time it launches. So right now, if I went to my Behaviors panel, I wouldn't see this. So we are going to have to close out of Dreamweaver, and then launch it back again, so that it will reinitialize these behaviors. So I am going to go to Dreamweaver and I am going to choose Quit Dreamweaver. Okay. So we have closed Dreamweaver and we have opened it back up again, and now our behavior should be available to us, because when Dreamweaver launches, it loads all its behaviors up and it should be listed in the panel.

So I am going to open up the Index.htm file, I have opened up. So if you are following along with me in Exercise Files, go ahead and open this up, and if yours looks a little different than mine, don't panic. What we are seeing here is that I have my Style Rendering tuned off, and I accomplish that by using the Rendering toolbar. If you don't see that, you can go to View > Toolbars, and that is your Style Rendering Toolbar. So you can just bring that right up in just sort of Docks right up here. Now, I can toggle my styles on and off by clicking that, my styles are on, and you can see that when the styles are on, it's kind of really hard to see these little links over here in the upper right- hand corner, very hard to select those.

So that's why I am turning my Style Rendering off. So it just makes a little bit easier for me to select them. Now, before we try to apply a behavior, we need to remember something about what it is that our behavior is going to do. So behavior is going to switch out some style sheets on it for us, and we need to know the title of the Style Sheet. So I am going to switch over to Code view, so that I can see the title of my style sheets, and in Code View, on 7 and line 8, the normal text is called Normal Text and large text title is Large Text, and that's all I need in order to use my behavior. So I will switch back to Design View, and I am going to go ahead and start with large text. So to apply our behavior, we need to highlight the text we want to apply the behavior to and in this case, it's going to be the large A in the bracket notation.

So not any of the large text beside it or the normal text on the other side, just a bracket, notation A. So I am going to go up to my Behaviors panel, and I am going to click on the Plus symbol, and there is our Style Switcher. So you have to scroll down, you should see an alphabetical order, there is Style Switcher. I am going to go ahead and choose that, and I am going to go ahead and type in large text, because that's the title of the style sheet that we want to switch to. So I will click OK. Now, I notice that I have my Style Switcher behavior, and it's listed in my Behaviors panel, and the default event for is onClick. So when somebody clicks, the style sheets swap out, and that's perfect.

So I am going to do the same thing for the small a. We will go up and click the Plus symbol and choose Style Switcher. And did you notice the first time we did this, this is the form that we created. This is our Action file so where it says title of new style sheet file, that's the form that we've created. The OK and the Cancel button were applied for us. So we didn't have to do that. So here I am just going to type in Normal Text, there we go, click OK. There again, it says onClick Style Switcher. We will save that, and then, just to make sure that our behavior did what we expected it to do, I am going to switch over to Code View, I am going to scroll up and sure enough, there is our setActiveStyleSheet, perfect.

So we are going to save that file if we haven't already, and let's test it in our browser and see how our behavior is working. Okay, so it opens up, and I am going to click on the large text. Now, I will click on the normal text. Oh! No. Well, it's not working. Well, this is not uncommon. Whenever you are creating a behavior, it's a pretty complex process. So it's not always going to work the first time out of the gate. So in our next movie, we will examine the process of debugging a behavior.

Find answers to the most frequently asked questions about Dreamweaver CS3 Beyond the Basics.


Expand all | Collapse all
please wait ...
Q: In the Chapter 3 movie “Creating rounded corners with background graphics”, the instructor uses a .last class selector. What are the CSS properties of this selector?
A: The .last selector is as follows:
#current p.last{
background: url(../_images/current_btm_bg.gif) no-repeat bottom
left;
padding-bottom: 2em;
margin: 0;
}
The background is the bottom rounded corner graphic, the bottom padding keeps the type away from the bottom of the box and thus the rounded corners, and the margin ensures that the box elements fit seamlessly with each other.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.

join now 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 CS3 Beyond the Basics.

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
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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.